Steren's labs

I wanted to animate a vector graphic (SVG) image by making some elements appearing gradually one after the other.

My first first step was to clean up the markup and give meaningful CSS classes to my SVG elements. For example:

<style type="text/css">
  .arrow .line{fill:none;stroke:#8B999E;stroke-width:3;stroke-miterlimit:10;}
  .arrow .head{fill:#8B999E;}
</style>
<g class="arrow">
  <path class="line" d="M160,41.4c9.2-4.9,21-7.2,29.8-8.2"/>
  <polygon class="head" points="187.2,37.9 203.1,32.3 186.5,29.2"/>
  <path class="line" d="M95,90.2c10-18.5,22.7-26.7,22.7-26.7"/>
</g>

My second step was to use CSS animations to gradually make elements appear (go from opacity 0 to 100). To do that, I defined the animation @keyframes. Then I referenced the animation in the CSS class. To make multiple animations in sequence, I simply used the animation-delay attribute, with a computed value using calc() and a CSS variable for the time delay:

    @keyframes appear {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 100;
      }
    }

  .arrow{
    animation-name: appear;
    animation-duration: 60s;
    animation-fill-mode: backwards;
    --spacing: 0.6s;
  }
  .arrow:nth-of-type(2) {
    animation-delay: calc( 1*var(--spacing) );
  }
  .arrow:nth-of-type(3) {
    animation-delay: calc( 2*var(--spacing) );
  }
  .arrow:nth-of-type(4) {
    animation-delay: calc( 3*var(--spacing) );
  }
  .arrow:nth-of-type(5) {
    animation-delay: calc( 4*var(--spacing) );
  }

Here is the final result. Find the full SVG markup on GitHub.