Motion

Use the motion tokens to keep transitions consistent. The default transition uses duration-fast with ease-standard. Hover over a row to preview its motion.

Durations

duration-blink 80ms. Brief selection feedback
duration-fast 150ms. Hover and press feedback. The default duration.
duration-standard 250ms. Content entering or changing size
duration-slow 400ms. Page transitions and large panels
duration-bloom 600ms. Deliberate brand accents

Easings

ease-standard Most UI transitions cubic-bezier(0.2, 0, 0, 1)
ease-entrance Content entering view cubic-bezier(0, 0, 0, 1)
ease-exit Content leaving view cubic-bezier(0.23, 1, 0.32, 1)
ease-bloom Playful overshoot for brand accents cubic-bezier(0.34, 1.56, 0.64, 1)

Rules

Name the property with transition-colors or transition-[translate]. Avoid transition-all.

Use ease-entrance when opening and ease-exit when closing. Both start fast and settle, so motion answers at once.

Wrap decorative motion in motion-safe:. A spinner may keep moving at a slower speed.

Keep frequent and keyboard actions immediate. Keep routine transitions under 300ms.

Use named motion tokens. The theme checker rejects raw values such as duration-300 and ease-in-out.