Motion, easing and duration
Motion is how a screen changes over time, set by an easing curve and a duration. Material defines named easing and duration tokens, and Apple’s guidance asks for motion that is purposeful, brief and optional.
Why it matters
Timing is most of what makes an interface feel quick. The same transition in the wrong curve feels sluggish or abrupt, and gratuitous motion distracts or makes people uncomfortable.
Apple asks that motion is never the only way to give important information, so a design needs a reduced-motion answer.
Motion, easing and duration on iOS and Android
Also called Easing, Animation timing, Duration tokens. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | Motion: purposeful, optional, brief | Easing and duration, with standard, decelerate and accelerate curves | motion/duration and motion/easing tokens |
| Standard easing (Material Components) | No named curve in the guidelines | cubic-bezier(0.2, 0, 0, 1) | See below |
| Decelerate easing (Material Components) | No named curve in the guidelines | cubic-bezier(0, 0, 0, 1) | See below |
| Durations in the file | Same tokens | 120, 200, 320 and 480 ms | See below |
In Appetite UI
The Motion page holds duration tokens, fast 120, base 200, slow 320 and slower 480, and easing tokens, standard, decelerate, accelerate, emphasized and linear. Sheets enter on decelerate, toggles on standard, and dialogs and page pushes on emphasized.
Example
A bottom sheet enters in 200 ms on the decelerate curve and leaves in 120 ms on the accelerate curve, so it arrives smoothly and gets out of the way fast.
Common mistakes
- One duration and one curve for everything. Pick from the tokens by job.
- Motion that is the only signal for a state change.
- Ignoring reduced motion. Provide a quieter version.
- Long animations on frequent actions.
Questions
What is the standard easing in Material 3?
cubic-bezier(0.2, 0, 0, 1), used for utility animations that begin and end on screen. The decelerate curve, cubic-bezier(0, 0, 0, 1), is for elements that enter.
How long should a mobile animation last?
Appetite UI uses 120 ms for fast state changes, 200 ms for a sheet or dialog, 320 ms for progress and 480 ms for the slowest, a skeleton pulse.
Sources
The pages the facts above rest on, each read October 30, 2026.