How long should a transition be before it starts to feel sluggish?

Keep most interface transitions in roughly the 100 to 300 millisecond window, with small moves near the bottom of that range and larger ones allowed to stretch toward 400 to 500, and you stay on the responsive side of sluggish. The threshold is set by perception, not preference. Anything much under 100 milliseconds can flash by too fast to read, and once a transition lingers past a few hundred milliseconds it stops feeling like a quick response and starts feeling like a wait the user is enduring.

These numbers are not arbitrary; they line up with current published guidance. Nielsen Norman Group’s long standing threshold is that about 0.1 second, 100 milliseconds, is the limit for a response to feel instantaneous, the point at which the user feels they caused the change rather than the computer. Material Design 3 and Microsoft’s Fluent both land in the same place in practice, suggesting roughly 100 to 200 milliseconds for small elements and small areas, and up to about 400 to 500 milliseconds for large transitions like a full screen or modal that crosses a lot of distance. The shared principle across all of them is that duration should serve perception: long enough to be seen, short enough to feel immediate.

The reason larger moves earn more time is physical, not decorative. An element traveling a long distance at the same duration as a tiny one would appear to teleport, so the brain needs a few extra frames to track where it went. A button that shifts color can resolve in 100 to 150 milliseconds and feel crisp. A panel sliding the full width of the screen needs more like 250 to 400 to let the eye follow its path. Scaling time with the size of the move is what keeps both feeling responsive rather than one feeling abrupt and the other feeling slow.

The habit to avoid is reaching for slow, smooth transitions because they read as premium. A 600 or 800 millisecond ease does look luxurious in isolation and in a portfolio shot, but in real use, where the same transition fires dozens of times a session, every one of those extra hundreds of milliseconds is time the user spends waiting on the interface to finish performing. Premium is not slow. The most refined interfaces tend to be the fastest, spending only as much time as the move genuinely needs and not a frame more.

There is a real boundary on the fast side too. A transition can be too short. If a state change snaps with no transition at all, or resolves under about 80 to 100 milliseconds on a large move, the user may not perceive the connection between cause and result and the change reads as a jarring jump. So the window has a floor as well as a ceiling, and the answer is not always faster, it is fast enough to feel instant while still long enough to be perceived.

When you set a duration, start at roughly 150 milliseconds for ordinary state changes, push small accents down toward 100, and let only genuinely large movements rise toward 300 to 400. Then watch the transition fire repeatedly the way a real user would, not once in admiration but ten times in a row, and if it begins to feel like a wait, cut it. Tie the time to the size of the move and to perception, never to how impressive the motion looks on its own, and your transitions will stay on the responsive side of the line.