animationDelay

Animation delay is a timing parameter used with CSS animations to specify how long an element should wait before an animation begins. It is controlled by the animation-delay property and can be set with a time value such as 0s, 0.5s, or 2s. Negative values are allowed, which causes the animation to start partway through as if it had already progressed for that duration. When multiple animations are applied to a single element, animation-delay can take a list of comma-separated values, with each delay corresponding to the respective animation.

The delay works together with the animation-duration to shape the overall timing of the animation sequence. During the delay, the animation does not advance; the element remains in its initial state until the delay expires. If the animation-fill-mode is forwards or both, the element may retain its final state after the animation completes, independent of the delay duration.

In practice, animation-delay is commonly used to stagger effects, create coordinated entrances, or synchronize animations with user interactions or other events. For example, setting a delay of 0.5s on one element and 1s on another can produce a cascading reveal.

Examples:

- .box { animation-name: fadeIn; animation-duration: 1s; animation-delay: 0.5s; }

- .panel { animation: fadeIn 0.8s ease, slideUp 1s ease; animation-delay: 0.2s, 0.6s; }

Browser support is broad for the unprefixed property in modern environments; older implementations may require vendor prefixes such as -webkit-animation-delay. See also CSS animations and keyframes.