Transitions & Animation

Transition Delay

Utilities for controlling the delay of CSS transitions.

Quick reference

Class	Description
delay-{amount(ms)}	transition-delay: {amount}

Available values
{amount}: Accepts any value in ms (1000 = 1 s)

Basic usage

Delaying transitions

Use the delay-{amount} utilities to control an element’s transition-delay.

delay-150

Hover me

delay-300

Hover me

delay-700

Hover me

<div class="transition duration-300 delay-150 ...">Hover me</div>
<div class="transition duration-300 delay-300 ...">Hover me</div>
<div class="transition duration-300 delay-700 ...">Hover me</div>

Applying conditionally

Hover, focus, and other states

Warp lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:delay-300 to only apply the delay-300 utility on hover.

<div class="transition duration-300 delay-150 hover:delay-300"></div>

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:delay-300 to apply the delay-300 utility at only medium screen sizes and above.

<div class="transition duration-300 delay-150 md:delay-300"></div>