# transition-property

> Applies `transition-property` on its own, so a variant can change which properties animate while the duration and timing function declared elsewhere stay in place.

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

Applies `transition-property` on its own, so a variant can change which
properties animate while the duration and timing function declared
elsewhere stay in place.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.transitionProperty("transform")` | `css({ transitionProperty: "transform" })` |

## Examples

### Basic example

Use `transitionProperty(list)` to choose which properties animate; the rest change instantly. Hover each button:

```tsx
<div mix={[...]}>
	<button
		type="button"
		mix={[
			transitionProperty("transform"),
			transitionDuration("500ms"),
			hover([scale(1.2), shadow("xl")]),
			...,
		]}
	>
		transform
	</button>
	<button
		type="button"
		mix={[
			transitionProperty("box-shadow"),
			transitionDuration("500ms"),
			hover([scale(1.2), shadow("xl")]),
			...,
		]}
	>
		box-shadow
	</button>
	<button
		type="button"
		mix={[
			transitionProperty("all"),
			transitionDuration("500ms"),
			hover([scale(1.2), shadow("xl")]),
			...,
		]}
	>
		all
	</button>
</div>
```

## Applying on a state

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

```ts
u.hover(u.transitionProperty("transform"))
```

## Responsive design

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

```ts
u.at("md", u.transitionProperty("transform"))
```

## Signature

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