SVG Fade in Animation

Question

Hi I have an SVG which is 5 arrow shapes stacked. I am wanting to fade in each arrow from the bottom up. When the top arrow has faded in, I want the first one to fade out, then the second etc. And then start the animation again by fading in each arrow.

Here is a code pen of the SVG code: https://codepen.io/anon/pen/gyJZEy

<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">
            <rect>
                <animate id="hg0" begin="0;hg0.end" dur="8s"
                attributeName="visibility" from="hide" to="hide"/>
            </rect>
            <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 id="hg1" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin;hg0.end" 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 id="hg2" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+1s;hg0.end+1s" repeatCount="indefinite"/>
            </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 id="hg3" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+2s;hg0.end+2s" repeatCount="indefinite"/>
            </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 id="hg4" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+3s;hg0.end+3s" repeatCount="indefinite"/>
            </path>
            <path class="hg" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z">
                <animate id="hg5" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+4s;hg0.end+4s" repeatCount="indefinite"/>
            </path>
        </g>
    </g>
</svg>

Stranger in the Q · Answer 1 · 2019-05-02T11:13:53.343

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>

Nice and smooth but prefer not to use CSS and have the animation as part of the svg — Pedro, May 02 '19 at 00:35

Paul LeBeau · Accepted Answer · 2019-05-01T07:34:34.627

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>

SVG Fade in Animation

2 Answers2