Foundations
Motion
Durations and easings come from motion tokens. Every duration is 0ms when the reader prefers reduced motion, and no state change waits for an animation to finish.
Durations
| Token | Value | Reduced motion | Length |
|---|---|---|---|
motion.duration.fast | 100ms | 0ms | |
motion.duration.normal | 200ms | 0ms | |
motion.duration.slow | 300ms | 0ms | |
motion.duration.slower | 500ms | 0ms |
Easing
| Token | Value |
|---|---|
motion.easing.enter | cubic-bezier(0, 0, 0.2, 1) |
motion.easing.exit | cubic-bezier(0.4, 0, 1, 1) |
motion.easing.linear | cubic-bezier(0, 0, 1, 1) |
motion.easing.standard | cubic-bezier(0.4, 0, 0.2, 1) |
Reduced motion
- Every open, close, navigation, and state change works with no animation; reduced motion removes or shortens decorative motion.
- The generated token CSS sets every duration to 0ms under
prefers-reduced-motion: reduce, so transitions that read the tokens stop without a check in each component. - Cleanup never depends only on
transitionendoranimationend: state, visibility, focus, and accessibility attributes change at once, and an interrupted or zero-length transition settles in the same final state.