[ @sdxc/u/effects ]

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.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

<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.

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

Responsive design

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

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

Signature

u.transitionProperty(value: string)