Анимация стрелок

Пример анимации движения стрелки на чистом css

<div class="arrow-8"></div>


.arrow-8 { position: relative; width: 100px; height: 100px; margin: 30px;}
.arrow-8:before { content: ''; position: absolute; box-sizing: border-box; width: 100%; height: 100%; border-left: 26px solid #337AB7; border-bottom: 26px solid #337AB7; transform: translate(26px, 106px) rotate(-45deg); animation: arrow-8 3s linear infinite;
}
.arrow-8:after { content: ''; position: absolute; box-sizing: border-box;     width: 100%; height: 100%; border-left: 26px solid #337AB7; border-bottom: 26px solid #337AB7; transform: translate(53px, 0px) rotate(-45deg); animation: arrow-8 3s linear infinite -1.5s;
}
 
@keyframes arrow-8 { 0% {     opacity: 0;     transform: translate(-13px, -53px) rotate(-45deg); } 10%, 90% {     opacity: 0; } 50% {     opacity: 1;       border-left: 26px solid #337AB7;     border-bottom: 26px solid #337AB7;     transform: translate(-13px, 0px) rotate(-45deg); } 100% {     opacity: 0;     transform: translate(-13px, 53px) rotate(-45deg); }
}