Sequencing & Timing · Who moves first
Duration & Delay时长与延迟
- foundational
- tunable
- rhythmic
Duration decides how fast a motion is; delay decides when it starts. Together they set the rhythm of the interface.
When to use it
Set these two first on every animation: 150–250ms for small elements, 300–500ms for large areas; past 500ms motion usually feels sluggish.
Parameters
small elements 150–250ms · large surfaces 300–500ms · delay 0–120ms · ease-out to enter, ease-in to leave
Recipe
delay 0–120msDuration & Delay → small elements 150–250ms · large surfaces 300–500ms · ease-out to enter, ease-in to leave
One sentence for your AI
Set this button's press animation to 180ms with a 0ms delay, and the panel expansion to 320ms with an 80ms delay, both ease-out.