svg arrow animation

svg arrow animation

by Korah Babu Varghese

HTML

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg2"
   viewBox="0 0 744.09448819 1052.3622047" class="arrow2">
  <g
     id="layer1">
    <path
       d="m 418.11164,415.50621 -295.8554,0.32013 -0.2544,-292.39433 51.69549,5.68619 -66.68729,-72.822993 -73.693126,71.875743 55.510829,-5.74339 0.2836,326.00165 328.797297,-0.35578 z"
       id="e326_shape"
       style="fill:#ff0000;fill-opacity:1;stroke-width:1" />
  </g>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="arrow2" 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>

<svg width="39" class="arrow1" xmlns="http://www.w3.org/2000/svg" height="45">
<rect id="canvas_background" opacity="0" height="47" width="41" y="-1" x="-1" fill="#fff"/>
<g id="canvasGrid" height="100%" width="100%" y="0" x="0" overflow="visible" display="none">
<rect height="100%" width="100%" y="0" x="0" stroke-width="0" fill="url(#gridpattern)"/>
</g>
<g stroke="#2ecc71">
<line stroke-width="2" x1="6.62" stroke-opacity="null" fill-opacity="null" transform="rotate(1.59 7.12 22)" y1="6" x2="7.62" y2="38" fill="none"/>
<line stroke-width="2" x1="6.25" stroke-opacity="" fill-opacity="null" y1="37.6" x2="33.6" y2="37.6" fill="none"/>
<path d="m5.45 24.4l1.68-2.63 1.68 2.63h-3.36z" transform="rotate(180 7.13 23.1)" stroke-width="5.5" fill="#2ecc71"/>
<path d="m19.8...

CSS

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

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

}

.arrow1 path,.arrow2 path {
	fill: red;
	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;
}