Duration

Basic Usage

Control how long animations take using the motion-duration-{value} utility:

<div class="motion-preset-fade motion-duration-2000">Slow fade in</div>

Slow fade in

The default duration for all animations is 700ms if no duration modifier is specified.

These are the theme default values. You can customize the theme to add your own values to the motionDuration property or use arbitrary values.

Apply duration to specific properties using a slash /:

<div class="motion-duration-2000/rotate motion-rotate-in-180 motion-opacity-in-0">
  Slow rotation, default duration opacity
</div>

Slow rotation, default duration opacity

<div class="motion-preset-fade motion-duration-100">Quick fade</div>

Quick fade

<div class="motion-preset-fade motion-duration-[3s]">Very slow fade</div>

Very slow fade

<div class="motion-duration-100/opacity motion-duration-2000/rotate motion-opacity-in-0 motion-rotate-in-180">
  Fast fade, slow rotation
</div>

Fast fade, slow rotation