Motion
Durations, easing, travel, transitions, and reduced-motion behavior.
Principles
- Motion explains relation, state, or spatial origin; it is not decoration.
- Direct feedback uses 100ms; larger spatial transitions may use 280ms.
- Exit faster than entry and move no farther than the relationship requires.
Usage boundaries
- No standard transition exceeds 400ms.
- Do not autoplay loops, parallax, or attention-seeking motion.
- Reduced-motion media queries set duration and travel tokens to zero.
Interactive reference
Token explorer
10 tokens
motion.duration.instant0msProvides a tokenized no-motion path.
Use: Reduced motion and immediate changes.
motion.duration.fast100msFast feedback makes manipulation feel immediate.
Use: Hover, press, and focus feedback.
motion.duration.standard180msStandard transitions remain noticeable without delay.
Use: Small reveals and state transitions.
motion.duration.deliberate280msLarge spatial changes need time to track.
Use: Drawers, sheets, layout transitions.
motion.duration.slow400msThe capped slow tier prevents ornamental motion.
Use: Rare large-stage transitions.
motion.easing.standardcubic-bezier(0.2, 0, 0, 1)A decelerating curve gives changes a natural stop.
Use: Default property transitions.
motion.easing.entercubic-bezier(0, 0, 0.2, 1)Entering content settles gently.
Use: Content entering the viewport.
motion.easing.exitcubic-bezier(0.4, 0, 1, 1)Exiting content clears quickly.
Use: Content leaving the viewport.
motion.distance.small0.25remFour-pixel travel communicates relation without disorientation.
Use: Menus and subtle reveals.
motion.distance.medium0.75remTwelve-pixel travel supports larger surfaces.
Use: Drawers and sheets; never looping decoration.