Motion
Shared values. Animation is how change explains itself. If it doesn't change what the eye understands, it doesn't ship.
Ease-out, short, on the thing that changed. Reduced motion is a first-class path, not a later pass.
Easing
| Token | Value | Use |
|---|---|---|
--ease-out | cubic-bezier(0.23, 1, 0.32, 1) | Default enter and feedback |
--ease-move | cubic-bezier(0.45, 0, 0.55, 1) | Large layout shifts |
--ease-linear | linear | Progress loops only |
No ease-in on feedback. It starts slow and feels laggy.
Duration
| Token | Value | Use |
|---|---|---|
--dur-0 | 0ms | Instant |
--dur-micro | 80ms | Focus ring |
--dur-fast | 120ms | Press, hover |
--dur-base | 180ms | Metric tick |
--dur-enter | 280ms | Panel / overlay enter |
--dur-exit | 160ms | Panel / overlay exit |
--dur-shift | 400ms | Rare large layout |
--stagger | 40ms | Per item on list enter |
Spec
| Motion | Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|---|
| Press | scale(0.97) | 120ms --dur-fast | --ease-out | :active | instant |
| Hover | opacity / color | 120ms --dur-fast | --ease-out | :hover | instant |
| Panel enter | opacity + translateY(6px) | 280ms --dur-enter | --ease-out | mount | opacity 120ms or instant |
| Panel exit | opacity + translateY(4px) | 160ms --dur-exit | --ease-out | unmount | instant |
| Stagger | enter + 40ms/item --stagger | — | --ease-out | list | no stagger |
| Metric tick | opacity (optional 2px blur, one-shot) | 180ms --dur-base | --ease-out | value | instant swap |
| Focus | outline opacity | 80ms --dur-micro | --ease-out | :focus-visible | instant |
| Overlay | opacity + scale(0.98→1) | 280 / 160 | --ease-out | open / close | opacity only |
Performance
- Only transform and opacity for hover-many, scroll, and loops.
- Blur is one-shot (metric tick). Not on hover. Not on scroll.
will-changesparingly, and remove it after the animation.
Accessibility
@media (prefers-reduced-motion: reduce) maps durations to 0 or to 80ms opacity. Never block a task. Never flash more than three times per second. WCAG 2.3.1.
Never use motion as the only indication of a state change. See Accessibility.
Tokens
Shared values. The spec table above is the contract. These are the CSS names the rest of the system imports.
--ease-out enter / feedback--ease-move large layout--ease-linear loops only--dur-micro 80ms--dur-fast 120ms--dur-base 180ms--dur-enter 280ms--dur-exit 160ms--stagger 40msPress and hover
Focus the controls — ring fades in 80ms, instant under reduced motion.
Related
- Elevation
- Assets — motion signature
- Principles — Motion explains change