transition-delay

Utilities for controlling the delay of CSS transitions.

Examples

Basic example

Use utilities like delay-150 and delay-700 to set the transition delay of an element in milliseconds:

Supporting reduced motion

For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the motion-safe and motion-reduce variants:

<!-- [!code classes:motion-reduce:delay-0] -->
<button type="button" class="delay-300 motion-reduce:delay-0 ...">
  <!-- ... -->
</button>

Using a custom value

Responsive design