title: Chaining Multiple CSS Animations on SVG in Infinite Loop
body: <p>I have two animated svg's, with two separate animations. I would like to chain them (and maybe more in the future) — infinite on one element. I would prefer CSS only.</p>
  
  <p>I have tried to chain them like this question <a href="https://stackoverflow.com/questions/33004919/chaining-multiple-css-animations">Chaining Multiple CSS Animations</a>, but it seems that it is harder with the infinite loop — or there might be something wrong with my @keyframes (too simple).</p>
  
  <p>The code can be found here: <a href="https://codepen.io/Miet/pen/bWWONo" rel="nofollow noreferrer">https://codepen.io/Miet/pen/bWWONo</a></p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;div class="svg-container"&gt;
      &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 35 22" style="enable-background:new 0 0 32.4 21.7;" xml:space="preserve"&gt;
          &lt;g&gt;
              &lt;path class="st0" d="M2.5,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C-0.1,12.1,1.1,13.2,2.5,13.2"
                  /&gt;
              &lt;path class="st0" d="M29.9,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
                  C27.3,12.1,28.4,13.2,29.9,13.2"/&gt;
              &lt;path class="st0" d="M8,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C5.4,6.2,6.5,7.2,8,7.2"/&gt;
              &lt;path class="st0" d="M24.4,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C21.8,6.2,23,7.2,24.4,7.2"/&gt;
              &lt;path class="st0" d="M16.2,21.6c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
                  C13.6,20.5,14.8,21.6,16.2,21.6"/&gt;
              &lt;path class="st0" d="M16.2,4.9c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C13.6,3.8,14.8,4.9,16.2,4.9"/&gt;
          &lt;/g&gt;
  
          &lt;linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10.853" x2="32.3588" y2="10.853"&gt;
              &lt;stop  offset="0.2597" style="stop-color:#EE3251"/&gt;
              &lt;stop  offset="1" style="stop-color:#F47529"/&gt;
          &lt;/linearGradient&gt;
  
          &lt;polyline class="st1" points="16.2,2.5 24.4,4.9 2.5,10.9 8.1,4.8 16.2,19.2 30.1,10.8 "/&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  
  &lt;div class="svg-container"&gt;
      &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 35 22" style="enable-background:new 0 0 32.4 21.7;" xml:space="preserve"&gt;
          &lt;g&gt;
              &lt;path class="st0" d="M2.5,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C-0.1,12.1,1.1,13.2,2.5,13.2"
                  /&gt;
              &lt;path class="st0" d="M29.9,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
                  C27.3,12.1,28.4,13.2,29.9,13.2"/&gt;
              &lt;path class="st0" d="M8,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C5.4,6.2,6.5,7.2,8,7.2"/&gt;
              &lt;path class="st0" d="M24.4,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C21.8,6.2,23,7.2,24.4,7.2"/&gt;
              &lt;path class="st0" d="M16.2,21.6c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
                  C13.6,20.5,14.8,21.6,16.2,21.6"/&gt;
              &lt;path class="st0" d="M16.2,4.9c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C13.6,3.8,14.8,4.9,16.2,4.9"/&gt;
          &lt;/g&gt;
  
          &lt;linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10.853" x2="32.3588" y2="10.853"&gt;
              &lt;stop  offset="0.2597" style="stop-color:#EE3251"/&gt;
              &lt;stop  offset="1" style="stop-color:#F47529"/&gt;
          &lt;/linearGradient&gt;
  
          &lt;polyline class="st2" points="16.2,2.5 24.4,4.9 2.5,10.9 8.1,4.8 16.2,19.2 30.1,10.8 "/&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>    svg {
          width: 20em;
          display: block;
          margin: 5em auto;
          padding: 1rem;
      }
  
      .svg-container {
          width: 49%;
          display: inline-block;
          min-width: 21em;
      }
  
  
      g {
          cursor: pointer;
      }
  
      .st0 {
          fill:#EE3251;
      }
  
      .st1,
      .st2 {
          stroke-dasharray: 60;
          fill: none;
          stroke: url(#SVGID_1_);
          stroke-width: 5;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-miterlimit: 10;
      }
  
      .st1 {
          animation: dash 4s infinite ease-in-out alternate;
      }
  
      .st2 {
          animation: dashLong 2500ms infinite linear;
      }
  
      @keyframes dash {
          from {
              stroke-dashoffset: 200;
          }
      }
  
      @keyframes dashLong {
          from {
              stroke-dashoffset: 120;
          }
      }
  </code></pre>