# interactiveTransition

> The `interactiveTransition()` style-mixin factory: the shared `transition-property`/`transition-timing-function`/`transition-duration` triplet composed into an interactive control's `mix` array, animating a hover, focus, press, selection, or validity change instead of snapping between states, sourced from the animation layer's shared tokens.

```ts
import { interactiveTransition } from "@sdxc/ui/styles";
```

Composes the transition-property/timing-function/duration triplet shared
by every interactive control's hover, focus, press, selection, and
validity-state changes, for use alongside a host's own `css()` styling.

## Signature

```ts
interactiveTransition<Node extends Element = Element>(): MixinDescriptor<
	Node,
	[styles: CSSStyles],
	ElementProps
>
```

Returns: A `css()` mixin ready for a host element's `mix` prop.

## Examples

```tsx
<input
	mix={[
		interactiveTransition(),
		css({
			borderColor: "var(--ui-neutral-border)",
			"&:hover": { borderColor: "var(--ui-neutral-border-strong)" },
		}),
	]}
/>;
```