The animation itself is not difficult to do, only these arrows, how to do it? enter image description here

1 answer 1

You can create such a moving arrow of three components: the tail of the arrow ( .arrow__left ), the sliding part ( .arrow__center ) and the tip of the arrow ( .arrow__right ). The central part will initially be zero width, while hovering the width will increase. Cut tail and tip using the clip-path property. Just pay attention to the limited support of this property by browsers, I recommend using @supports .

 .arrow { display: flex; } .arrow__left { width: 100px; height: 400px; background-image: url(http://i.imgur.com/vt1Bu3m.jpg); clip-path: polygon(0% 0%, 100% 50%, 0 100%, 100% 100%, 100% 0); } .arrow__right { width: 100px; height: 400px; background-image: url(http://i.imgur.com/vt1Bu3m.jpg); background-position: -100px 0; transition: all .2s; clip-path: polygon(0% 0%, 100% 50%, 0 100%); } .arrow__center { background-image: url(http://i.imgur.com/vt1Bu3m.jpg); background-position: -100px 0; width: 0; transition: width .2s; } .arrow:hover .arrow__center { width: 400px; } .arrow:hover .arrow__right { background-position: -500px 0; } 
 <div class=arrow> <div class=arrow__left> </div> <div class=arrow__center> </div> <div class=arrow__right> </div> </div>