Foundations
Motion
Motion confirms cause and effect. It should be fast enough to feel instant and never delay a user who already knows what they're doing. Hover the tiles below.
Durations
Fast — 120ms
--duration-fast
Micro-interactions: hover, toggle, checkbox
Base — 200ms
--duration-base
Default: dropdowns, tabs, most transitions
Slow — 320ms
--duration-slow
Modals, page-level transitions, large surfaces
Easing
| Token | Curve | Used for |
|---|---|---|
ease-standard | cubic-bezier(.2,0,0,1) | Default for most transitions |
ease-decelerate | cubic-bezier(0,0,0,1) | Elements entering the screen (modals, toasts) |
ease-accelerate | cubic-bezier(.3,0,1,1) | Elements exiting the screen |
ease-emphasized | cubic-bezier(.2,0,0,1.1) | Rare — celebratory or attention-drawing moments |
Principles
- Animate
transformandopacityonly — neverwidth/height/top/left, which cause layout thrash. - Respect
prefers-reduced-motion: reduce non-essential motion to an opacity crossfade for users who request it. - Never use motion as the only indicator of a state change — pair with a color or icon change too.