CSS animation delay in repeating

Question

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.

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.

@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;
}

As you can see, I am trying to have a delay of 4 seconds, followed by the shine sweeping across in 1 second, repeated.

However, it seems that the animation-delay only applies to the first iteration, after which the shine just keeps sweeping across repeatedly.

I "resolved" this issue as follows:

@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;
}

from and 80% are exactly the same, resulting in a "delay" of 80% of the animation length.

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.

With the above "solution", I would end up with a slower animation when all I want is a longer delay.

Is it possible to have the animation-delay apply to all iterations, rather than just the first?

Answer 1

I had a similar problem and used

@-webkit-keyframes pan {
   0%, 10%       { -webkit-transform: translate3d( 0%, 0px, 0px); }
   90%, 100%     { -webkit-transform: translate3d(-50%, 0px, 0px); }
}

Bit irritating that you have to fake your duration to account for 'delays' at either end.