UI Animation Rules: Duration and Easing

Motion can make interfaces feel responsive, clear, and polished. A menu that slides in from the button that opened it explains where it came from. A subtle press animation confirms a tap. A smooth transition between screens helps people keep their place.

Motion can also make products feel slow, distracting, and even physically uncomfortable. The difference comes down to purpose, timing, and restraint. These rules cover the essentials.

Rule 1: Every animation needs a purpose#

Before adding motion, ask what it communicates. Useful purposes include:

Feedback: confirming that an action was registered, like a button press or a successful save.
Orientation: showing where something came from or went, like a panel sliding in from the side.
Relationships: connecting elements, like a card expanding into a detail view.
State change: making changes noticeable, like a new item appearing in a list.
Attention: drawing focus to something important, used sparingly.
Continuity: smoothing transitions so content doesn't jump.

If an animation has no clear purpose, it's decoration — and decoration that slows people down is a cost.

Rule 2: Keep it fast#

Most UI animations should be short. Rough guidelines:

Micro-interactions like button presses, toggles, and hover states: around 100 to 200 milliseconds.
Small transitions like dropdowns, tooltips, and fades: around 150 to 250 milliseconds.
Larger transitions like modals, panels, and page transitions: around 250 to 400 milliseconds.

Longer animations feel sluggish, especially for actions people repeat frequently. If an animation makes someone wait, it's too long.

Distance and size matter too. Elements moving a short distance should animate faster than elements moving across the whole screen. Mobile animations are often slightly shorter than desktop ones, because the distances are smaller.

Rule 3: Use natural easing#

In the physical world, objects don't start and stop instantly. They accelerate and decelerate. Easing curves recreate this, making motion feel natural.

Ease out (fast start, slow end): best for elements entering the screen. They arrive quickly and settle gently.
Ease in (slow start, fast end): best for elements leaving the screen. They gather speed as they exit.
Ease in-out (slow start and end): best for elements moving from one position to another on screen.
Linear: rarely appropriate for movement; useful for continuous animations like progress spinners or color changes.

Most design systems define a small set of standard easing curves. Use them consistently.

Rule 4: Make feedback immediate#

When people interact with something, the interface should respond instantly — within about 100 milliseconds — even if the full result takes longer. A button that visibly reacts to a press reassures people that their action registered. Without that feedback, they tap again, causing duplicate actions.

For actions that take longer, combine immediate feedback with a loading or progress state.

When several elements animate together, coordinate them:

Stagger list items slightly so they appear in sequence rather than all at once, but keep the total time short.
Lead with the most important element so attention goes there first.
Move related elements together so their relationship is clear.
Avoid conflicting motion, like elements moving in different directions simultaneously without reason.

Good choreography feels like one coherent movement rather than many separate animations.

Rule 6: Preserve spatial logic#

Motion should reinforce a consistent mental model of space:

A panel that slides in from the right should slide back out to the right.
A modal that grows from a button should shrink back toward it.
Navigating deeper might move content to the left; going back moves it to the right.

Consistent spatial logic helps people understand where they are and how to get back.

Rule 7: Don't block people#

Animations shouldn't prevent interaction. People should be able to:

Interrupt animations — tapping elsewhere or navigating away while something is animating.
Continue working while non-critical animations finish.
Skip long sequences, such as onboarding animations.

Blocking input until an animation completes makes the interface feel slow and unresponsive.

Rule 8: Use attention-grabbing motion sparingly#

Pulsing, bouncing, or shaking elements are very effective at drawing attention, which is exactly why they should be rare. A shaking password field after a failed login communicates an error clearly. A constantly pulsing button becomes irritating and easy to ignore.

Never use continuous motion near content people need to read.

Rule 9: Respect reduced motion preferences#

Some people experience discomfort, dizziness, or nausea from motion, particularly large movements, parallax effects, and zooming. Operating systems offer a "reduce motion" setting, and interfaces should respect it.

When reduced motion is enabled:

Replace large movements with simple fades or instant changes.
Remove parallax and decorative motion.
Keep essential feedback, but make it subtle.

Avoid flashing content entirely; rapid flashing can trigger seizures in people with photosensitive epilepsy.

Rule 10: Keep performance smooth#

A stuttering animation is worse than no animation. For smooth performance:

Animate properties that browsers and devices handle efficiently, such as transform and opacity, rather than layout properties like width, height, or position.
Avoid animating many elements at once on low-powered devices.
Test on older and mid-range devices, not just high-end ones.

Aim for consistently smooth frame rates. Dropped frames make interfaces feel cheap.

Rule 11: Define motion as a system#

Just like color and typography, motion benefits from consistent tokens:

Duration tokens: for example, fast, medium, and slow.
Easing tokens: standard, entering, and exiting curves.
Patterns: documented behaviors for common components like modals, menus, toasts, and page transitions.

A motion system ensures that animations feel consistent across the product and makes implementation faster.

Rule 12: Hand off motion clearly#

Motion is often lost in handoff because static designs can't show it. To communicate motion to developers:

Provide prototypes demonstrating key interactions.
Specify duration, easing, delay, and properties that change.
Reference motion tokens rather than one-off values.
Record short videos of complex sequences.
Review the implementation together on real devices.

Motion with meaning#

The best interface animation is often barely noticed. It confirms actions, explains changes, and guides attention without making people wait or distracting them from their goals.

Give every animation a purpose, keep it fast, use natural easing, respect reduced motion, and build a consistent system. Motion done this way makes products feel not just smoother, but easier to understand.

UI Animation Rules: Duration, Easing, and Purpose