How to Apply CSS Animation Delay to All Iterations?

CSS Animation Delay: Application to All Iterations

When using CSS animations with a delay, you might encounter an issue where the delay is only applied to the first iteration, causing the animation to continuously repeat without the desired interval.

To resolve this issue, you can employ a different approach:

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

Here, the 80% keyframe is identical to the from keyframe, effectively creating a "delay" of 80% of the full animation length.

As suggested by an experienced user, you could also use the following approach:

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

This method involves creating a fake duration to accommodate the "delays" at both ends of the animation.

The above is the detailed content of How to Apply CSS Animation Delay to All Iterations?. For more information, please follow other related articles on the PHP Chinese website!