---
url: /docs/foundations/css-classes/transition-delay.md
---
> 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.

```html
<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.

```html
<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.

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