# transition-delay

> Applies `transition-delay` on its own, so items sharing one transition can stagger by giving each an increasing delay.

```ts
import { transitionDelay } from "@sdxc/u/effects";
```

Applies `transition-delay` on its own, so items sharing one transition can
stagger by giving each an increasing delay. Keep the stagger on the entering
state and leave the leaving state at `0s`, so dismissal stays immediate.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.transitionDelay()` | `css({ transitionDelay: "0s" })` |
| `u.transitionDelay("120ms")` | `css({ transitionDelay: "120ms" })` |

## Examples

### Basic example

Use `transitionDelay(time)` to wait before a transition starts, with a CSS time like `"150ms"`. Hover each button:

```tsx
<div mix={[...]}>
	<button
		type="button"
		mix={[
			transition("transform", { duration: 300 }),
			transitionDelay("0s"),
			hover(scale(1.2)),
			...,
		]}
	>
		0s
	</button>
	<button
		type="button"
		mix={[
			transition("transform", { duration: 300 }),
			transitionDelay("150ms"),
			hover(scale(1.2)),
			...,
		]}
	>
		150ms
	</button>
	<button
		type="button"
		mix={[
			transition("transform", { duration: 300 }),
			transitionDelay("500ms"),
			hover(scale(1.2)),
			...,
		]}
	>
		500ms
	</button>
</div>
```

### Staggering items

Give each item an increasing delay to stagger one transition across a group. Hover the row:

```tsx
<div mix={[...]}>
	<div
		mix={[
			transition("transform", { duration: 300 }),
			transitionDelay("0ms"),
			when(":hover > &", translateY(-4)),
			...,
		]}
	/>
	<div
		mix={[
			transition("transform", { duration: 300 }),
			transitionDelay("75ms"),
			when(":hover > &", translateY(-4)),
			...,
		]}
	/>
	<div
		mix={[
			transition("transform", { duration: 300 }),
			transitionDelay("150ms"),
			when(":hover > &", translateY(-4)),
			...,
		]}
	/>
	<div
		mix={[
			transition("transform", { duration: 300 }),
			transitionDelay("225ms"),
			when(":hover > &", translateY(-4)),
			...,
		]}
	/>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.transitionDelay())
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.transitionDelay())
```

## Signature

```ts
u.transitionDelay(value?: string)
```