How to Use Animation in UX: Best Practices
These animation best practices apply to websites, web apps and mobile apps alike, and they cover purpose, timing, feel, accessibility, speed and testing.
Give Every UX Animation a Job
Before adding motion, write down its job in one line. "Confirms the item was added to the cart." "Shows that the filter panel came from the filter button." If you cannot write that line, drop the animation.
This habit also keeps the total amount of motion low. When only purposeful UX animation survives, each one stands out and does its job better.
Keep Animation Duration Short
Timing makes or breaks motion, and Nielsen Norman Group guidance on animation duration gives useful ranges:
- About 100 ms for simple feedback, such as a checkbox or a toggle.
- 200–300 ms for larger changes, such as a modal opening or a menu dropping down.
- Up to 500 ms for complex or long-distance movement. Beyond that, motion starts to feel like a drag.
Elements that appear can take slightly longer than elements that leave, because users need to see what arrived. A modal might open in 300 ms and close in 200–250 ms. On mobile, where elements travel shorter distances, the lower end of each range usually feels right.
Use Easing That Feels Natural
Easing controls how speed changes during an animation. Real objects do not start and stop at full speed, so linear motion looks mechanical on screen.
For elements entering the screen, use ease-out: a fast start that slows at the end, which feels responsive and gives the eye time to settle on the new element. For elements leaving, ease-in or ease-in-out works well. Pick a small set of easing curves and reuse them everywhere, so the product has one consistent feel.
Stay Consistent Across Web and Mobile Apps
Users learn your motion language quickly. If a panel slides in from the right on one screen and fades in on another, they lose that learning. Define motion rules once and apply them everywhere.
Animation in mobile apps should also respect platform habits. iOS and Android each have familiar patterns for navigation, sheets and gestures, and users expect them. The best approach is a shared motion system, with durations, easing curves and patterns written down, that each platform adapts to its own conventions. Store it with your design system so designers and developers use the same values.
Design Animation for Accessibility
For some people, motion is not just annoying, because it can make them ill. People with vestibular disorders, which affect the inner-ear balance system, can feel dizziness, nausea or migraines from large movements such as parallax, spinning and big zooms. Motion can also distract people with attention difficulties.
Accessible animation keeps the benefits of motion while removing the risks: keep movement small, avoid flashing, and make sure no information is carried by motion alone.
Respect prefers-reduced-motion and WCAG 2.3.3
Most operating systems let users ask for reduced motion. Websites can read that choice through the CSS media query prefers-reduced-motion, and native apps can read the matching system setting.
The W3C's WCAG 2.1 Success Criterion 2.3.3, Animation from Interactions, asks that motion triggered by user interaction can be turned off unless it is essential. Its related criterion, 2.2.2 Pause, Stop, Hide, covers motion that starts on its own. In practice, when reduced motion is on, swap slides and zooms for simple fades or instant changes:
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms ease-out; transform: none; }
}
Protect Performance: Animate Transform and Opacity
A smooth animation on a designer's laptop can stutter on a budget phone. Janky motion feels worse than none, because it can delay the user's next tap.
The safest rule for CSS animation on the web is to animate transform and opacity wherever possible. Browsers can handle these two properties without recalculating the page layout, which keeps the frame rate high. Animating width, height, top or left forces layout work on every frame and is a common cause of dropped frames. Use will-change only when a real problem shows up, and remove it afterwards.
Test motion on real low-end devices, not just in desktop browser tools. Our guide to performance testing in application development covers how to build these checks into your release process.
Test UI Animation With Real Users
Motion that feels right to the team can confuse the people who use the product. Include UI animation in usability sessions and watch whether users notice the feedback, follow the transitions and act without waiting.
Ask specific questions afterwards, such as whether anything felt slow or moved in a way users did not expect. Our article on user testing for your website or app explains how to plan sessions that catch problems like these.
Quick checklist of animation best practices
- Every animation has a one-line job.
- Simple feedback runs at about 100 ms, larger changes at 200–300 ms, and nothing passes 500 ms without a reason.
- Entrances use ease-out. No linear motion.
- One motion system covers web and mobile apps.
- Reduced-motion settings swap large movement for fades.
- Only transform and opacity are animated where possible.
- Motion has been tested on a low-end phone and with real users.
