Skip to results

Design Animation Timing Systems

Motion & Interaction · motion

Updated 2026-07-28

Consistency matters more than individual animations.
Use timing categories:

Micro interactions

Presses.
Toggles.
Hover.
Under 150 milliseconds.

Component transitions

Dropdowns.
Panels.
Modals.
Around 200–300 milliseconds.

Attention moments

Errors.
Celebrations.
Important feedback.
Longer when needed.

Entrances can be slower.
Exits should usually feel faster.
Animation speed communicates personality:

Too fast feels broken.
Too slow feels heavy.

Related guides

Use Consistent Animation Timing to Create Responsive Interfaces
Design Animation Consistency
Design Micro-Interactions That Make Interfaces Feel Alive
Design Motion Timing
Design Easing Curves