Transitions

--transition: var(--default-transition) covers the commonly animated properties with the kit's spring easing. A --<utility>--starting tier sets the value the element animates in from.

To animate fewer properties, use one of the groups --default-transition is built from: --default-transition-colors, --default-transition-transforms, --default-transition-effects (opacity, filters, shadow), and --default-transition-content (display, overlay and the other discrete properties, with allow-discrete). A button that only changes color can use --transition: var(--default-transition-colors). Each group has a matching --default-transition-property-* list of names for writing your own transition-property.

--transition-duration and --transition-delay change the timing without restating the property list. They also win over a primitive's own transition, so --transition-duration: 0.6s slows a dialog down without touching its CSS. Unlike --transition, they take breakpoint tiers as well as states, so a stagger can tighten on small screens:

<li style="--transition: var(--default-transition-effects); --transition-delay: 120ms; --transition-delay--md: 240ms">

Like every tiered utility, a tier needs the base value: --transition-delay--md alone does nothing.

prefers-reduced-motion: reduce sets --default-transition-duration to 0s, but a literal --transition-duration keeps its value. To respect the setting, write the duration in terms of the token, for example --transition-duration: calc(var(--default-transition-duration) * 2).

Reference