Duration
Animation duration determines whether motion feels instant, responsive, or slow — the right duration depends on the size of the element and the weight of the change.
Duration is the most direct lever in motion design. Too short and the animation cannot be perceived — the change feels abrupt. Too long and the animation becomes a wait — the user is held back by the interface they are trying to use.
The scale
Interface animations operate in a narrow range. Below 100ms, motion is imperceptible — the change reads as instant. Between 100ms and 200ms, small elements can complete their transitions. Between 200ms and 400ms, standard UI transitions live — modals appearing, panels sliding, notifications arriving. Above 400ms, only complex orchestrated sequences justify the duration. Above 500ms, most users experience the animation as a delay rather than a communication.
Size and distance
Larger elements moving greater distances need more time to feel natural — a full-screen transition requires more duration than a tooltip appearing. A useful heuristic: small elements (chips, badges, icons) at 100–150ms; medium elements (cards, drawers, dropdowns) at 200–300ms; large or full-screen elements at 300–400ms. These are starting points, not rules — the goal is motion that feels appropriate to the physical scale of what is moving.
The weight of the change
Duration should reflect the semantic weight of what is happening, not only the physical scale of the element. A destructive confirmation dialogue deserves a slightly longer duration than a tooltip — not because it is larger, but because the pause encourages the user to read and consider it. Conversely, a hover state that takes 300ms to appear creates frustration because the change is too minor to justify the wait.
Symmetry
Enter and exit animations do not need to be the same duration. Exits are typically faster than entries — removing an element from the user’s attention should not require their patience. A modal that takes 250ms to appear might dismiss in 150ms. The user is already focused on what comes next; the exit animation should get out of the way.
Duration and reduced motion
The prefers-reduced-motion: reduce media query tells you the user has requested less motion — not necessarily zero motion. Duration has a specific role here: when respecting this preference, reducing duration rather than eliminating animation entirely is a valid strategy for some animation types.
A modal that normally appears with a 250ms fade can be set to 1ms (effectively instant) under reduced motion rather than toggling display: none abruptly. The state change still occurs; the motion is imperceptible. This approach preserves layout stability — an element jumping from hidden to visible without any transition can cause visual jarring — while honoring the user’s preference.
For spatial animation (translate, scale, rotation, parallax), the correct response to prefers-reduced-motion: reduce is to remove the spatial component entirely, not just shorten it. A 50ms translate is still a translate — it still causes vestibular disruption at a shorter duration. Replace spatial motion with opacity or instant state changes. See reduced motion for the full decision framework.
The takeaway
Set a duration scale of three or four values as part of your motion system — fast (100ms), base (200ms), slow (300ms), complex (400ms) — and assign each element type to a tier. Consistency within the scale matters more than the exact values. Arbitrary durations produce motion that feels unmeasured, even when individual animations look correct.