# animation-delay

> Applies the `animation-delay` property.

```ts
import { animationDelay } from "@sdxc/u/animation";
```

Applies the `animation-delay` property. The value is a `<time>` string, so
it always carries its unit, and a negative delay seeks: the animation starts
immediately, already advanced by that much of its duration.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.animationDelay("150ms")` | `css({ animationDelay: "150ms" })` |
| `u.animationDelay()` | `css({ animationDelay: "0s" })` |
| ``u.animationDelay(`${index * 60}ms`)`` | `css({ animationDelay: "120ms" })` |
| `u.animationDelay("-500ms")` | `css({ animationDelay: "-500ms" })` |

## Examples

### Basic example

Use `animationDelay()` with a CSS time, like `animationDelay("150ms")`, to start an element's animation later and stagger a group:

```tsx
<div
	mix={[
		keyframes("bounce", {
			"0%, 100%": { translate: "0 0" },
			"50%": { translate: "0 -1.5rem" },
		}),
		...,
	]}
>
	{["0ms", "150ms", "300ms"].map((delay) => (
		<div
			mix={[
				animationHost("bounce", { duration: "900ms", iterationCount: "infinite" }),
				animationDelay(delay),
				...,
			]}
		>
			{delay}
		</div>
	))}
</div>
```

### Using negative values

A negative delay, like `animationDelay("-500ms")`, starts the animation at once, already advanced by that much of its duration:

```tsx
<div
	mix={[
		keyframes("spin", { from: { rotate: "0deg" }, to: { rotate: "360deg" } }),
		...,
	]}
>
	{["0s", "-250ms", "-500ms"].map((delay) => (
		<div
			mix={[
				animationHost("spin", { duration: "2s", easing: "linear", iterationCount: "infinite" }),
				animationDelay(delay),
				...,
			]}
		>
			{delay}
		</div>
	))}
</div>
```

## Applying on a state

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

```ts
u.hover(u.animationDelay("150ms"))
```

## Responsive design

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

```ts
u.at("md", u.animationDelay("150ms"))
```

## Signature

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