CSS transition-delay Property

The transition-delay property controls the amount of time the browser waits after a property change before beginning the transition effect. It does not change which properties animate or how they interpolate; it only offsets when the animation actually starts. Because it is an independent timing parameter, you can use it to sequence visual changes (start one transition after another) or to give users a brief moment before an effect runs, which is useful for hover interactions, staged entrance effects, or coordinating multiple animated parts of a UI.

Timing and composition are handled in concert with the other transition-related properties: the properties that will animate are chosen by transition-property, how long each animation runs is governed by transition-duration, and the easing curve is determined by transition-timing-function. You can also express all of these together with the shorthand transition. When multiple transitions are declared (for example, a list of properties to animate), the delay values are matched positionally to the corresponding durations and properties; that positional matching is important when sequencing or staggering effects across several CSS properties.

In practical use, transition-delay is a lightweight way to orchestrate timing without JavaScript: staggered delays create a natural, cascading feel; short delays can avoid flicker from accidental pointer movements; and long delays can be used to make a response feel more deliberate. Keep in mind that if the property change that would trigger a transition is reversed before the delay elapses, the transition may never run; likewise, negative offset values (conceptually) can cause a transition to appear already in progress when it begins. For accessibility and user control, always consider users who prefer reduced motion and prefer coordinating delays with clear affordances rather than relying solely on timing.