A New Way to Delay Keyframes Animations

Creating pauses between iterations in CSS @keyframes animations isn't directly supported. While animation-delay postpones the animation's start, inserting delays between iterations requires workarounds. This article explores effective techniques, addressing limitations of prior methods.

The need arose while adapting a shooting stars animation for a space-themed employee portal. Fewer stars were needed to minimize distraction and CPU load, while maintaining a sense of randomness.

Limitations of Existing Methods

Traditional methods involve adjusting keyframes to a fraction of 100%, maintaining the final state until 100% to simulate a pause. This is cumbersome, error-prone, and makes understanding the animation's logic difficult.

@keyframes my-animation {
  /* Animation (0% to 50%) */
  0% { width: 0; }
  15% { width: 100px; }
  /* Pause (50% to 100%) */
  50%, 100% { width: 0; }
}

A New Approach: Conditional Hiding

A superior method uses a second @keyframes set to control visibility during the pause. This separates animation logic from pausing.

.target-of-animation {
  animation: my-awesome-beboop 1s, pause-between-iterations 4s;
}

@keyframes my-awesome-beboop {
  /* Your main animation here */
}

@keyframes pause-between-iterations {
  /* Visible (25%) */
  0%, 25% { opacity: 1; }
  /* Hidden (75%) */
  25.1%, 100% { opacity: 0; }
}

The pause duration must be a multiple of the animation's duration. Infinitely repeating keyframes will restart immediately, overriding longer animations.

Key Insight: Easing functions apply between defined keyframes, not from 0% to 100%. This means the easing curve is applied individually to each property between consecutive keyframes.

In the example above, my-awesome-beboop runs multiple times unseen during the pause before visually resuming.

Here's how this applies to the shooting stars animation:

Maintaining Visibility During Pauses

If the animation must remain visible during pauses, a second @keyframes set can counteract the primary animation's motion. For example, if translateX is used, animate left or margin-left to neutralize the movement.

Examples include pausing using transform-origin or counteracting translateX with left animation. Pausing translateX for multiple iterations requires more complex keyframes:

/* Pausing for three iterations */
@keyframes slide-left-pause {
  25%, 50%, 75% { left: 0; }
  37.5%, 62.5%, 87.5% { left: -100px; }
  100% { left: 0; }
}

Minor jitter might occur due to conflicting animations.

Conclusion

Hiding the element during pauses or counteracting transform animations offers the best performance. Manipulating properties like left, margin, or width is more computationally intensive than adjusting opacity.

Credit to Yusuke Nakaya for the original shooting stars animation.

The above is the detailed content of A New Way to Delay Keyframes Animations. For more information, please follow other related articles on the PHP Chinese website!