effects

transition-property

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.

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" })`

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

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

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)