Delay

Basic Usage

Control when animations start using the motion-delay-{value} utility:

<div class="motion-preset-fade motion-delay-500">Delayed fade in</div>

Delayed fade in

Default Value

The default delay for all animations is 0ms if no delay modifier is specified.

Available Values

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

Class	Value
motion-delay-0	0s
motion-delay-75	75ms
motion-delay-100	100ms
motion-delay-150	150ms
motion-delay-200	200ms
motion-delay-300	300ms
motion-delay-500	500ms
motion-delay-700	700ms
motion-delay-1000	1000ms
motion-delay-1500	1500ms
motion-delay-2000	2000ms
motion-delay	0ms
motion-delay-[2s]	Arbitrary value

Property-Specific Delay

Apply delay to specific properties using a slash /:

<div class="motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0">
  Delayed rotation, immediate opacity
</div>

Delayed rotation, immediate opacity

Examples

Staggered Animation

<div class="motion-preset-fade motion-delay-0">First item</div>
<div class="motion-preset-fade motion-delay-[200ms]">Second item</div>
<div class="motion-preset-fade motion-delay-[400ms]">Third item</div>

First item

Second item

Third item

Multiple Properties

<div class="motion-delay-0/opacity motion-delay-500/rotate motion-opacity-in-0 motion-rotate-in-180">
  Immediate fade, delayed rotation
</div>

Immediate fade, delayed rotation

Custom Delay Value

<div class="motion-preset-fade motion-delay-[1500ms]">Long delay</div>

Long delay