transition-delay

Definition

The transition-delay CSS property is used to introduce a delay before the transition effect begins when a CSS transition is applied to an element. It allows you to control the timing of the transition, specifying the duration between the moment a property change is triggered and when the transition effect actually starts.

The transition-delay property accepts a time value or the 0s keyword:

• A time value specifies the delay duration in seconds (s) or milliseconds (ms). For example, transition-delay: 0.5s; introduces a delay of 0.5 seconds before the transition effect begins.
• The 0s keyword sets no delay, meaning the transition effect starts immediately when the property change is triggered.

Here’s an example:

.button {
  transition-delay: 0.3s;
}

In this example, the .button class sets the transition-delay property to 0.3s, introducing a delay of 0.3 seconds before the transition effect starts when a property change occurs.

It’s important to note that the transition-delay property is applied to individual properties being transitioned. If multiple properties have different transition delays, each property will have its own timing.

The transition-delay property is commonly used in combination with other transition-related properties, such as transition-property, transition-duration, and transition-timing-function. Together, these properties allow for the creation of smooth and controlled transitions between different states of an element.

By specifying different transition delays for multiple properties, you can create cascading or staggered effects, controlling the timing and sequence of each transition. This can be useful in creating engaging and visually appealing animations or effects on hover, focus, or other interaction states.

Remember to consider the overall user experience and ensure that the transition delays are appropriate and do not result in delays that are too long or disrupt the flow of the interface.

Syntax

.tooltip {
  transition-delay: 120ms;
}

Values

• <time> including negative values.
• Comma-separated list mapping to transitioned properties.

Practical Examples

.tooltip {
  transition: opacity 120ms ease;
  transition-delay: 80ms;
}

Delay transitions to avoid accidental hovers or create staged reveals.

<div class="inline-flex flex-col items-center gap-2">
  <button class="rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Hover</button>
  <span class="rounded bg-slate-900 px-3 py-2 text-xs text-white" style="opacity:0; transition: opacity 0.12s ease 0.08s;">Tooltip</span>
</div>

Tips & Best Practices

• Use small delays on tooltips to prevent flicker.
• Negative delays jump ahead in the transition sequence.

Accessibility & UX Notes

Avoid long delays that slow navigation.

Browser Support

Supported with transitions.

Related

• transition-duration.
• animation-delay.