How Can I Add a Consistent Delay Between CSS Animation Iterations?

CSS Animation Delay: Extending the Pause Between Iterations

To achieve a repeating animation with a consistent delay between iterations, rather than one that is only applied to the first iteration, consider the following methods:

1. Adjust Animation Duration:

One workaround is to incorporate the desired delay into the animation duration. This involves calculating the actual duration the animation should take (including the delay) and then setting the animation-duration property accordingly. For example:

@keyframes barshine {
  <!-- ...Animation definition here... -->
}
.progbar {
  animation: barshine 5s linear infinite;
  animation-delay: 1s;
}

In this example, the animation will have a true duration of 5 seconds, with a 1-second delay.

2. Use Separate Animations for the Delay and Effect:

Another approach is to create separate animations for the delay and the actual effect. This method provides more flexibility to control the delay independently from the animation itself. Here's how you can achieve this:

@keyframes shine {
  <!-- ...Animation definition for the effect here... -->
}
@keyframes delay {
  from {opacity: 0;}
  to {opacity: 1;}
}
.progbar {
  animation: delay 4s, shine 1s infinite;
}

In this case, the 'delay' animation will gradually increase the opacity from 0 to 1 over 4 seconds, creating a fade-in effect. The 'shine' animation will then run indefinitely, creating the intended sweeping gradient.

3. Use Vendor Prefixes:

In some cases, you may encounter browser compatibility issues with the 'animation-delay' property. To ensure compatibility, it's recommended to include vendor prefixes such as '-webkit-' or '-moz-' along with the standard property. For example:

@-webkit-keyframes barshine {
  <!-- ...Animation definition... -->
}
@-moz-keyframes barshine {
  <!-- ...Animation definition... -->
}

Additional Note:

The provided code from the answer using '@-webkit-keyframes' is suitable for older versions of WebKit. It's generally not recommended to rely on vendor prefixes in modern development unless necessary for compatibility.

The above is the detailed content of How Can I Add a Consistent Delay Between CSS Animation Iterations?. For more information, please follow other related articles on the PHP Chinese website!