title: Single SVG with two animations, one delayed to play after the other via CSS only?
body: <p>I am trying to apply two animations to a single SVG, which I have been able to achieve, however I cannot figure out how to delay one and not the other, as I'd like them to play one and then the other. </p>
  
  <p>I'd like for the first animation (the SVG's path "draws" itself) to play and complete itself, and then for the second animation (The SVG's "fill" fades in) to play afterward.</p>
  
  <p>I have seen people using animation delay in their css, however this would apply to both animations rather than a singular one, as it is a singular SVG target.</p>
  
  <p>Here is the <a href="https://codepen.io/-Infamous/pen/vZmPVe" rel="nofollow noreferrer">CodePen</a>.</p>
  
  <p>And the relevant CSS:</p>
  
  <pre><code>.preload-container__svg-wrap svg{
    stroke: #EE2D24;
    fill: #EE2D24;
    fill-opacity: 0;
    width: 100%;
    height: auto;
    stroke-dasharray: 1300;
    stroke-dashoffset: 1300;
    animation: draw/*,fill*/ 5s ease forwards;
  }
  
  @keyframes draw {
    to {stroke-dashoffset: 0}
  }
  
  @keyframes fill {
    to {fill-opacity: 1}
  }
  </code></pre>
  
  <p>The JQ in the pen is not relevant, I am focusing on the CSS issue here.</p>