# transition

> Applies the `transition-property`/`transition-timing-function`/ `transition-duration` triplet behind most hover, focus, press and selection state changes, so a call site only names which properties animate.

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

Applies the `transition-property`/`transition-timing-function`/
`transition-duration` triplet behind most hover, focus, press and selection
state changes, so a call site only names which properties animate.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.transition("color, background-color")` | `css({ transitionProperty: "color, background-color", transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)", transitionDuration: "150ms" })` |
| `u.transition("transform", { duration: 200 })` | `css({ transitionProperty: "transform", transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)", transitionDuration: "200ms" })` |

## Examples

### Basic example

Use `transition(properties)` to animate the properties a state changes, with a standard duration and easing. Hover the button:

```tsx
<button
	type="button"
	mix={[transition("transform"), hover([translateY(-1), scale(1.1)]), ...]}
>
	Save changes
</button>
```

### Setting the duration

Pass `duration` in milliseconds, or as a CSS time string, to slow the transition down or speed it up. Hover each button:

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

### Setting the easing

Pass `easing` to choose the timing function, like `"linear"`, `"ease-in"` or a `cubic-bezier()`. Hover each track:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<div
			mix={[
				transition("transform", { duration: 1000, easing: "linear" }),
				when(":hover > &", translateX("200%")),
				...,
			]}
		>
			linear
		</div>
	</div>
	<div mix={[...]}>
		<div
			mix={[
				transition("transform", { duration: 1000, easing: "ease-in" }),
				when(":hover > &", translateX("200%")),
				...,
			]}
		>
			ease-in
		</div>
	</div>
	<div mix={[...]}>
		<div
			mix={[
				transition("transform", {
					duration: 1000,
					easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
				}),
				when(":hover > &", translateX("200%")),
				...,
			]}
		>
			overshoot
		</div>
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.transition("color, background-color"))
```

## Responsive design

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

```ts
u.at("md", u.transition("color, background-color"))
```

## Signature

```ts
u.transition(properties: string, options?: TransitionOptions)
```