Durations, and the properties worth animating
How long it takes, and whether the property can be animated by the compositor rather than by relaying out the page.
Durations, and the properties worth animating
Two things decide whether motion feels good: how long it takes, and whether the property you chose can be animated by the compositor rather than by relaying out the page.
Compositor properties, and why they matter
transform and opacity can be animated entirely on the compositor thread: the browser hands the layer to the GPU and moves or fades it without touching layout or paint. They stay smooth even while JavaScript is busy.
Animating height, width, top or margin forces layout on every frame, and layout is the expensive part. On a list of any size that is where frames get dropped.
transition: all animates properties you did not intend, including any that force layout, and it is a common cause of animation appearing where nobody asked for it.
Under 100ms is not motion
Below about 80 to 100 milliseconds a transition is not perceived as movement, only as a change having happened. That is sometimes exactly right — a checkbox does not need to travel.
Above 400ms it stops being feedback and starts being a wait. The band where motion reads as responsive is narrower than most design systems assume.
Distance should change duration
A tooltip appearing 8 pixels away and a drawer sliding 400 pixels should not take the same time. Real objects moving further take longer, and matching that is most of what makes motion feel natural rather than mechanical.