SVG Fade in Animation
The simplest approach is to use a keyTimes attribute to control the fade in and fade out timing.
We have five arrows. The first one takes one second to fade in, then waits for the other four to fade in. Then takes one second to fade out again, and waits for the other four to do the same.
This means that the animation takes 10s in total for each arrow. And there are five key times in that animation:
- at 0s, opacity value is 0
- at 1s, opacity value is 1
- at 5s, opacity value is 1
- at 6s, opacity value is 0
- at 10s, opacity value is 0
The keyTimes attribute works in conjunction with the values attribute. It specifies at which time in the animation the opacity has to be at each value. So it needs to have the same number of values as there are in the values attribute. The other thing you need to know about keyTimes values is that its time values have to be in fractions of the duration. So for the second time above (1s), we need to use 0.1 (1s of 10s).
So our values attribute should be "0; 1; 1; 0; 0", and our keyTimes attribute will be "0; 0.1; 0.5; 0.6; 1".
Then to offset the start of each arrow's animation, we just use staggered begin times.
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
<defs>
<style>.hg{fill:#ee2330;opacity:0}</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path class="hg" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="1s"/>
</path>
<path class="hg" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="2s"/>
</path>
<path class="hg" d="M61.49 21.65L0 44.31v2.64l61.49-22.66 61.43 22.67v-2.64l-61-22.51-.43-.16z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="3s"/>
</path>
<path class="hg" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="4s"/>
</path>
</g>
</g>
</svg>Here a @keyfrmes + animation-delay version:
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
<style>
path {
fill: red; opacity: 0;
animation: 5.5s opacity infinite;
}
@keyframes opacity {
15% {opacity: 0}
35% {opacity: 1}
65% {opacity: 1}
85% {opacity: 0}
}
#hg2 {animation-delay: 0.5s}
#hg3 {animation-delay: 1.0s}
#hg4 {animation-delay: 1.5s}
#hg5 {animation-delay: 2.0s}
</style>
<path id="hg1" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z"></path>
<path id="hg2" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z"></path>
<path id="hg3" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z"></path>
<path id="hg4" d="M61.49 21.65L0 44.31v2.64l61.49-22.66 61.43 22.67v-2.64l-61-22.51-.43-.16z"></path>
<path id="hg5" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z"></path>
</svg>