How Long Should a UI Animation Last?
Working duration ranges for UI motion, why exits are shorter than entrances, how distance and input change the answer, and when a spring has no duration at all.
Core Takeaway
There is no single correct duration. Small feedback like a button press is near-instant, transitions between nearby views sit in the low hundreds of milliseconds, and full-screen changes can take longer. Exits are usually faster than entrances. Distance, element size, input type and device speed all change the answer, so treat any range as a starting point and test it in the real interface.
Duration follows the distance travelled
A tooltip that fades in place is a different job from a panel crossing the screen. The further an element moves and the more of the screen it covers, the longer the eye needs to track it. That is why large full-screen transitions can take longer than a small fade without feeling slow.
Small feedback: almost immediate
Press states, hover changes and small icon swaps should feel like a direct response. If the user can perceive a wait between input and feedback, the interface feels broken rather than animated. Keep these short and start them on the input event, not after the handler.
Local transitions: low hundreds of milliseconds
Dropdowns, popovers, small dialogs and expanding panels are the middle ground. Long enough to show where the element came from, short enough that the user does not wait. This is the range most design systems publish as short and medium duration tokens.
Larger changes and page transitions
Full-screen changes, sheets that cover the viewport, and route transitions can run longer because they carry more visual information. Even here, the limit is attention: if the animation is longer than the content takes to read, it is in the way.
Exits are shorter than entrances
An entrance explains what arrived. An exit only needs to get out of the way. Users already know what is leaving, so a faster exit feels responsive. Reversing the ratio is one of the most common reasons an interface feels sluggish.
Springs do not have a duration
A spring settles when its physics settle, so asking for a duration is the wrong question. You tune stiffness, damping and mass, then check how long it takes to become visually still. If you need an exact duration for a handoff or a video match, a duration-based curve is the simpler tool.
Test on a device, not a spec sheet
The same duration feels different on a mid-range phone and a desktop monitor. Perceived speed also changes with what the user is waiting for. Measure the real interaction, including slow networks and slow devices, before you write the number into a token.
Key Principles to Remember
- Duration scales with distance and how much of the screen changes
- Feedback should feel immediate, not animated
- Local transitions sit in the low hundreds of milliseconds
- Exits are shorter than entrances
- A spring has a settle time, not a duration
- Test on a mid-range device before committing a value
Frequently Asked Questions
Sources
- Applying easing and duration — Material Design 3
- Motion — Apple Human Interface Guidelines
- Animation performance and frame rate — web.dev