Foundations

Motion

One easing, --ease-out-quart, and three durations. Every transition uses them through the motion-* utilities, so a hover on one page moves at the same pace as a menu on another. Under prefers-reduced-motion the durations drop to zero and animations run once, at once.

Durations

Utility	Token	Duration	For
motion-fast	--duration-fast	150ms	Colour changes and small nudges, such as an icon on hover.
motion-base	--duration-base	250ms	Hovers, menus and fades: the default.
motion-slow	--duration-slow	400ms	Larger reveals.

Each motion-* utility sets the transition's duration and its easing, cubic-bezier(0.25, 1, 0.5, 1). Point at a box to see each one.

motion-fast

motion-base

motion-slow

Use

tsx

// A transition-* utility says what moves; a motion-* utility says how fast and with which easing
<a className="transition-colors motion-fast hover:text-fg">…</a>
<div className="transition-[opacity,translate] motion-base">…</div>

// The menu fade-in: fade-in over --duration-base with --ease-out-quart
<div className="animate-fade-in">…</div>

// Anything else reads the tokens
<div className="transition-transform duration-(--duration-slow) ease-out-quart">…</div>