Motion
Explain a state change, preserve orientation and let users reduce movement without losing functionality.
Purpose before animation
Animate when movement clarifies a relationship: an overlay entering from its trigger, a rearranged item reaching its new position, or a task moving from pending to complete. Keep reading surfaces quiet. Motion is optional presentation; the state transition must work with it disabled.
| Change | Starting treatment | Constraint |
|---|---|---|
| Hover or pressed feedback | --duration-fast | Respond promptly; preserve keyboard focus. |
| Small surface transition | --duration-normal with --ease-out | Keep the destination predictable. |
| Larger contextual change | --duration-slow | Use sparingly; never delay submitting or cancelling a task. |
| Reduced-motion preference | Immediate state change or low-motion feedback | Preserve all information and functionality. |
| Celebration | Optional short accent | Avoid looping or compulsory bouncing around language content. |
Duration specifications
| Token | Default value |
|---|---|
| --duration-fast | 100ms |
| --duration-instant | 0ms |
| --duration-normal | 200ms |
| --duration-slow | 300ms |
| --duration-slower | 500ms |
Easing specifications
This library uses finite CSS durations and cubic-bezier easing. Material Expressive also documents spring-based motion physics. These tokens do not implement a spring solver; do not describe a cubic-bezier animation as physically simulated.
| Token | Default value |
|---|---|
| --ease-bounce | cubic-bezier(0.68, -0.55, 0.265, 1.55) |
| --ease-default | cubic-bezier(0.4, 0, 0.2, 1) |
| --ease-in | cubic-bezier(0.4, 0, 1, 1) |
| --ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) |
| --ease-out | cubic-bezier(0, 0, 0.2, 1) |
Replay lab
The lab animates transform, cancels an interrupted replay and checks the operating-system reduced-motion preference before moving. Reset returns to the starting state.
Ready to replay the example.
Implementation and interruption
- Prefer transform and opacity for decorative transitions. Animating width or height can cause repeated layout work; measure if layout animation is necessary.
- Cancel superseded animations and settle to the latest state. Do not queue visual transitions behind rapid user input.
- Never wait for animationend to perform the only data update or release a disabled control.
- Reserve space for loading indicators and preserve input text during pending work. Use status text so movement is not the only feedback.
.surface {
transition: opacity var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
.surface { transition: none; }
}Failure cases
- Avoid auto-playing parallax, long zooms and large-field movement around reading content.
- Do not add transition: all; it can animate layout, colors or properties unintentionally.
- Do not use infinite animation as the only indication that a stalled request is working.
- Avoid automatically dismissing essential instructions before a user can read them.
Verification
- Replay, interrupt and reset the lab. Its final position and announced status should match the latest action.
- Enable reduced motion and verify immediate completion with no loss of controls.
- Use performance tools on representative low-power hardware; a smooth desktop preview is not performance proof.
- Test navigation and focus while overlays enter and exit. Focus must not depend on an animation finishing.