svg arrow animation

svg arrow animation

by Korah Babu Varghese

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="arrow1" width="1270px" height="960px" viewBox="0 0 1270 960" preserveAspectRatio="xMidYMid meet">
  <path d="M3.1236384966322017 3.7159091172152596v-5.589211993001718h-5.623638496632202v0.4908283757745009l-0.8519447665385145-0.7733217140933291 0.8319346743434477-0.8531351023746514v0.5089313164799396h6.270010092195067v6.211539834060007Z" id="e326_shape" fill="lime" transform="matrix(0.0452319 51.9938 52.9333 -0.0572778 314.09 310.888)" style="fill-opacity:0.4;stroke-width:1;vector-effect:non-scaling-stroke"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="arrow2" width="1270px" height="960px" viewBox="0 0 1270 960" preserveAspectRatio="xMidYMid meet">&gt;<path d="M3.1236384966322017,3.7159091172152596v-5.589211993001718h-5.623638496632202v0.4908283757745009l-0.8327120628375031,-0.7734346210916252l0.8127019706424363,-0.8530221953763566v0.50893131647994h6.270010092195067v6.25Z" id="e326_shape" style="vector-effect: non-scaling-stroke; stroke-width: 1px; fill-opacity: 0.4;" fill="lime" transform="matrix(-52.9324 0.313463 -0.313463 -52.9324 398.376 342.259)"/></svg>

CSS

.arrow1 {
	width: 50%;
	height: 20%;

}
.arrow2 {
	width: 50%;
	height: 20%;

}

.arrow1 path,.arrow2 path {
	fill: green;
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrow1 path.a1,.arrow2 path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s;
}