[ @sdxc/u/effects ]

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.

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

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

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:

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

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

linear

ease-in

overshoot

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

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

Responsive design

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

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

Signature

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