Why Does CSS `animation-delay` Sometimes Only Affect the First Animation Iteration?

Understanding Animation Delays in CSS

The animation-delay property is an important CSS attribute that controls the delay before an animation starts. However, in certain scenarios, it may only apply to the initial iteration of an animation, leaving subsequent iterations unaffected.

For instance, consider the following 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;
}

In this example, the animation-delay of 4 seconds is only applied to the first loop of the animation. Subsequently, the shine animation continues indefinitely, without any delay.

Alternative Approach

One alternative to using animation-delay is to introduce an intermediary step within the animation keyframes. For instance:

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

This technique effectively extends the animation duration to accommodate the desired delay (in this case, 80% of the total duration). However, this approach can alter the appearance of the animation.

Cross-Browser Compatibility

It's important to note that the behavior of animation-delay can vary across different browsers. Some browsers may apply the delay consistently across all iterations, while others may reset the delay with each subsequent loop. As a result, it's often necessary to employ browser-specific workarounds.

The above is the detailed content of Why Does CSS `animation-delay` Sometimes Only Affect the First Animation Iteration?. For more information, please follow other related articles on the PHP Chinese website!