Motion · Foundations

Duration

Interface motion stays under 300ms. Faster animation makes the whole product feel faster, even when nothing else changed.

Scale#

Element	Duration	Easing
Press feedback	100–160ms	--ease-out
Tooltip, small popover	125–200ms	--ease-out
Dropdown, select	150–250ms	--ease-out
Dialog, sheet	200–300ms	--ease-out
Drawer	400ms	--ease-drawer
Hover color	150ms	ease
Marketing, explanatory	500ms+	--ease-out / --ease-in-out

Feel it#

Open the same menu at four speeds. 180ms feels responsive. 400ms already feels like waiting.

Enter vs exit#

Be slow where the user is deciding and fast where the system is responding. Exits are usually 20–30% shorter than enters. A hold-to-confirm fills over 1.5s but snaps back in 200ms.