transitiondelay

Transition-delay is a CSS property that specifies the amount of time to wait before starting a transition after a property value change triggers the transition. It works in conjunction with transition-duration and transition-property to control when and how a transition occurs on an element.

The syntax accepts time values in seconds (s) or milliseconds (ms). When multiple properties are being transitioned, transition-delay can take a comma-separated list of values that correspond to the transition-property list. If only one delay is provided, it applies to all properties. If more properties are listed than delays, the unspecified delays default to 0s.

Common usage involves delaying the start of a transition to create staggered or synchronized effects. For example, you can apply a delay to a color transition on hover to have the color change begin after a short pause, while other properties begin earlier. The delay is applied after a property change is detected and before the transition begins its animation.

Transition-delay interacts with transition-duration: the animation does not begin until the delay has elapsed, and then proceeds for the duration specified. Accessibility considerations include respecting users’ reduced-motion preferences to minimize or disable transitions when appropriate.

Browser support for transition-delay is excellent across modern browsers. It is typically used with the shorthand transition property or the longhand transition-delay, and can be combined with multiple values for complex, multi-property transitions.