# transitionDuration

> Applies `transition-duration` on its own, so a media query such as `prefers-reduced-motion` can shrink an already-declared transition to zero while its property list and timing function stay in place.

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

Applies `transition-duration` on its own, so a media query such as
`prefers-reduced-motion` can shrink an already-declared transition to zero
while its property list and timing function stay in place.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.media("(prefers-reduced-motion: reduce)", u.transitionDuration("0s"))` | `css({ "@media (prefers-reduced-motion: reduce)": { transitionDuration: "0s" } })` |

## Examples

### Basic example

Use `transitionDuration(time)` to set how long a transition takes, with a CSS time like `"150ms"` or `"1s"`. Hover each button:

```tsx
<div mix={[...]}>
	<button
		type="button"
		mix={[
			transitionProperty("transform"),
			transitionDuration("150ms"),
			hover(scale(1.2)),
			...,
		]}
	>
		150ms
	</button>
	<button
		type="button"
		mix={[
			transitionProperty("transform"),
			transitionDuration("500ms"),
			hover(scale(1.2)),
			...,
		]}
	>
		500ms
	</button>
	<button
		type="button"
		mix={[
			transitionProperty("transform"),
			transitionDuration("1s"),
			hover(scale(1.2)),
			...,
		]}
	>
		1s
	</button>
</div>
```

### Respecting reduced motion

Set it inside `media()` to shorten a transition declared elsewhere, like dropping it to `"0s"` when the reader prefers reduced motion. Hover the button:

```tsx
<button
	type="button"
	mix={[
		transition("transform", { duration: 500 }),
		media("(prefers-reduced-motion: reduce)", transitionDuration("0s")),
		hover(scale(1.2)),
		...,
	]}
>
	Hover me
</button>
```

## Applying on a state

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

```ts
u.hover(u.media("(prefers-reduced-motion: reduce)", u.transitionDuration("0s")))
```

## Responsive design

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

```ts
u.at("md", u.media("(prefers-reduced-motion: reduce)", u.transitionDuration("0s")))
```

## Signature

```ts
u.transitionDuration(value: string)
```