Anti-pattern · Motion · High
One Duration Fits All
One duration fits all means every transition shares a single duration — usually 300ms — no matter how far or how large the moving thing is.
The tell
Every transition and animation in the stylesheet shares one duration value.
Why it happens
A single duration is easy to write and looks consistent in code review. It is also what you get when motion is added as an afterthought rather than designed.
The rule
Three durations, keyed to what is moving: 150ms, 250ms, 400ms.
- Use 100-150ms for colour, opacity and small control feedback.
- Use 200-300ms for elements entering, leaving or resizing in place.
- Use 300-400ms only for large surfaces travelling a long distance.
What is a One Duration Fits All?
Duration should follow distance and size: a colour change on a small control is 100-150ms, a card entering is 200-300ms, a full-panel slide is 300-400ms. When everything takes 300ms, small interactions feel sluggish and large ones feel abrupt. Three durations on a token scale cover almost every interface.
Paste this after your existing prompt to strip the pattern from the result.