⏱️Animation Duration Guide

Guide recommended animation duration by element type and movement distance

UI Motion Duration Reference

ElementDurationEasing
Button feedback100–150msease-out
Hover effect150–200msease
Toggle / Switch150–200msease-in-out
Dropdown150–200msease-out
Tooltip100–150msease-out
Toast / Snackbar200–300msease-out
Modal / Dialog200–300msease-out
Side Drawer250–350msease-out
Page Transition300–400msease-in-out
Skeleton Shimmer1.2–1.8s (loop)ease-in-out

How to Choose Animation Duration for UI

Too fast and users miss the change; too slow and the interface feels heavy. Humans perceive interactions as natural when they fall in the 100–300ms range. Small, close-range elements should animate faster; large components covering the full screen can take longer.

Easing curves matter too. ease-out starts fast and decelerates — like an object landing naturally — making it ideal for enter animations. ease-in accelerates toward the end, which suits exit animations where elements disappear quickly.

Accessibility Note

Always respect the prefers-reduced-motion: reduce media query. Users with vestibular disorders can experience nausea from excessive motion. Disable or minimize animations for those users.

Frequently Asked Questions

How fast should a button animation be?

100–150ms is ideal. Below 100ms is barely noticeable; above 200ms feels sluggish.

What is the recommended duration for a modal entrance?

200–300ms. Keep the exit animation shorter (150–200ms) so users aren't kept waiting.

What duration should I use for page transitions?

300–400ms. Above 500ms users perceive the transition as slow.