CSS animation delay

Simple animation

Medium animation

Complex animations

Core principles

1. animation-play-state: paused (animation paused state)

• In CSS: animation: move 1s linear forwards paused;
• Purpose: freeze the animation so it does not play automatically
• Effect: the animation is "stuck" at a specific time point and only the current frame is shown

2. Negative animation-delay (negative delay)

• In JS: ball.style.setProperty("--delay", -input.value + "s");
• Purpose: make the animation appear as if it started from a specified time point
• Characteristic: a negative delay immediately advances the animation to the time point indicated by delay

3. Examples:

• delay: 0s → shows the animation's initial state
• delay: -0.5s → shows the animation halfway through
• delay: -1s → shows the animation's final state

Use cases

• Animation progress controller
• Interactive timeline display
• Scroll-based animation control
• Rotation control for a 3D model viewer