title: SVG Fade in Animation
body: <p>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.</p>
  
  <p>Here is a code pen of the SVG code:
  <a href="https://codepen.io/anon/pen/gyJZEy" rel="noreferrer">https://codepen.io/anon/pen/gyJZEy</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38"&gt;
      &lt;defs&gt;
          &lt;style&gt;.hg{fill:#ee2330;opacity:0}&lt;/style&gt;
      &lt;/defs&gt;
      &lt;g id="Layer_2" data-name="Layer 2"&gt;
          &lt;g id="Layer_1-2" data-name="Layer 1"&gt;
              &lt;rect&gt;
                  &lt;animate id="hg0" begin="0;hg0.end" dur="8s"
                  attributeName="visibility" from="hide" to="hide"/&gt;
              &lt;/rect&gt;
              &lt;path class="hg" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z"&gt;
                  &lt;animate id="hg1" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin;hg0.end" repeatCount="indefinite"/&gt;
              &lt;/path&gt;
              &lt;path class="hg" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z"&gt;
                  &lt;animate id="hg2" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+1s;hg0.end+1s" repeatCount="indefinite"/&gt;
              &lt;/path&gt;
              &lt;path class="hg" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z"&gt;
                  &lt;animate id="hg3" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+2s;hg0.end+2s" repeatCount="indefinite"/&gt;
              &lt;/path&gt;
              &lt;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"&gt;
                  &lt;animate id="hg4" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+3s;hg0.end+3s" repeatCount="indefinite"/&gt;
              &lt;/path&gt;
              &lt;path class="hg" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z"&gt;
                  &lt;animate id="hg5" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+4s;hg0.end+4s" repeatCount="indefinite"/&gt;
              &lt;/path&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>