transition-duration

Utilities for controlling the duration of CSS transitions.

Examples

Basic example

Use utilities like duration-150 and duration-700 to set the transition duration 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:duration-0] -->
<button type="button" class="duration-300 motion-reduce:duration-0 ...">
  <!-- ... -->
</button>

Using a custom value

Responsive design