title: CSS animation delay in repeating
body: <p>I've recently discovered how to "properly" use CSS animations (previously I dismissed them as not being able to make complex sequences like you could in JavaScript). So now I'm learning about them.</p>
  
  <p>For this effect, I'm trying to have a gradient "flare" sweep across a progress bar-like element. Similar to the effect on native Windows Vista/7 progress bars.</p>
  
  <pre><code>@keyframes barshine {
    from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
    to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
  }
  .progbar {
    animation: barshine 1s 4s linear infinite;
  }
  </code></pre>
  
  <p>As you can see, I am trying to have a delay of 4 seconds, followed by the shine sweeping across in 1 second, repeated.</p>
  
  <p>However, it seems that the <code>animation-delay</code> only applies to the first iteration, after which the shine just keeps sweeping across repeatedly.</p>
  
  <p>I "resolved" this issue as follows:</p>
  
  <pre><code>@keyframes expbarshine {
    from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
    80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
    to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
  }
  .progbar {
    animation: barshine 5s linear infinite;
  }
  </code></pre>
  
  <p><code>from</code> and <code>80%</code> are exactly the same, resulting in a "delay" of 80% of the animation length.</p>
  
  <p>This works, but for my next animation, I need the delay to be variable (constant for a particular element, but variable among elements that use the animation), while the animation itself stays exactly the same length.</p>
  
  <p>With the above "solution", I would end up with a slower animation when all I want is a longer delay.</p>
  
  <p>Is it possible to have the <code>animation-delay</code> apply to all iterations, rather than just the first?</p>