Motion
Transition & Easing
Transition and easing shape how a value moves from A to B over time — its duration and the curve of speed it follows — instead of snapping there instantly.
Definition
A transition is what lets a value move from A to B over time instead of snapping there instantly. There are really only two things you decide. The first is duration — how long the change takes. The second is easing — the rhythm the value follows during that time. Easing decides whether it moves at a steady pace, starts fast and slows to a gentle stop, or eases in and then rushes out. That is why people call it the "curve of speed." Get just these two right and your screen's motion instantly looks calmer and more deliberate.
Why does it matter?
Our eyes accept a change we can follow far more easily than one that jumps out of nowhere. When a button color flips instantly, your eye flinches, but a short transition connects the before and after so your brain gets a moment to register what actually changed. Easing especially shapes the whole impression of the motion. Real objects start from rest, pick up speed, and ease to a stop, so a curve that imitates that rhythm feels natural on screen too. A constant speed from start to finish, by contrast, reads as mechanical and stiff. A well-chosen curve can make the exact same duration feel noticeably more polished. In the end a good transition is not decoration meant to show off — it is a quiet courtesy that keeps the user from missing the change.
Common mistakes
- Setting durations far too long. Once you stack up motions that run past 500ms, the whole interface starts to feel sluggish, and users wait for an animation to finish before they can do the next thing. Keep motion just long enough to be noticed and no longer.
- Reaching for the default linear or ease on every change without a second thought. If you never pick an easing that fits the situation, the motion turns flat or unnatural — and using the same curve for elements entering and leaving feels especially off.
- Letting the speed and rhythm of transitions vary all over one screen. If one button snaps quickly while a card drifts slowly, the sense of unity falls apart, and the screen looks scattered no matter how nice each single motion is.
Practical tips
- Make ease-out — fast at the start, gently slowing to a stop — your default for most UI changes. Save linear for places where a constant speed fits, like a loading spinner, and spend springy, bouncy curves only on the one or two things you truly want to emphasize.
- Match duration to the size of the change. Something entering the screen in a big way feels right around 200–300ms, while a small shift in color or shadow sits comfortably near 150ms. Pin these down to a few shared values as a team so the rhythm stays steady across screens.
- Do not animate everything just because you can. Apply a transition only to the changes you genuinely want to highlight so the motion registers, and leave the rest still so the screen never turns busy.
Ask your AI
In the CSS/JSX I'm pasting below, find every transition and animation value, standardize the easing to ease-out as the default for most UI changes, and cut any duration over 500ms since that reads as sluggish. Collapse durations down to just two or three shared values — around 150ms for small changes like color or shadow, and 200–300ms for something entering the screen in a big way — and don't reuse the same curve for elements entering and leaving; give them distinct easings. Return the changes as an original-value → new-value table with your reasoning.
This product is [product type — e.g. a dense, data-heavy dashboard]. Design a motion token set that fits it. Define durations as a small set of steps — roughly 150ms for small changes like color or shadow and 200–300ms for large entrances — and never go past 500ms; make ease-out (fast start, gentle stop) the default easing, reserve linear for loading spinners only, and hand springy, bouncy curves to just the one or two things worth emphasizing. Output the values as a --duration-* / --ease-* CSS variable set with a table of what each one is for.
Build the show/hide transition for the [element — e.g. modal / toast / drawer] I'm pasting below. Use ease-out — fast start, gentle stop — for the entrance, and don't reuse that same curve on exit; give the exit a different, quicker easing so it clears out faster. Since this is a large on-screen movement, keep the duration in the 200–300ms range and never past 500ms, and add a prefers-reduced-motion fallback that removes or minimizes the motion. Return the finished code with the reasoning behind each value.