Duration
How long one run of an animation takes, start to finish. The single number that decides whether a UI feels snappy or sluggish.
See it
What it is
Duration is wall-clock time for one run of the motion, written in CSS as ms or s. Nothing else moves the perceived speed of an interface as much, and it is the first number to reach for when something 'feels off' but you cannot say why.
Working ranges for UI: 100 to 150ms for hovers, toggles, and small state flips, 200 to 300ms for dropdowns, popovers, and cards, 300 to 500ms for sheets, modals, and page transitions. Bigger elements travelling further earn more time. Past 500ms a UI stops feeling responsive and starts feeling like it is thinking.
Gotchas: a unitless '0.3' is invalid CSS and kills the whole declaration, so always write '300ms' or '0.3s'. The same duration on a 20px move and a 1000px move produce completely different perceived speeds, so tune to distance rather than to component. And durations chosen while staring at one element in isolation are almost always too long once the whole page is in motion.
Ask AI for it
Put the motion durations on a scale instead of picking them ad hoc: 120ms for hover, focus, and toggle state changes, 200ms for dropdowns, tooltips, and popovers, 320ms for modals, drawers, and sheets, 450ms maximum for a full page transition. Express them as CSS custom properties (--duration-fast, --duration-base, --duration-slow) and use those tokens everywhere instead of hardcoded values. Scale up for longer travel distances, and override every one of them to 0.01ms inside a 'prefers-reduced-motion: reduce' media query.