What does the curve represent?
On a cubic-bezier() curve, the horizontal axis is elapsed time and the vertical axis is how much of the transition has completed. The curve always starts at (0, 0) and ends at (1, 1) — those two points are fixed; you're only positioning the two control points in between. Where the curve is steep, the motion is fast; where it's flat, the motion is slow. The horizontal coordinates have to stay between 0 and 1, because time can't run backward, but the vertical coordinates are free to go outside that range. A vertical value above 1 makes the motion overshoot its target and settle back; a value below 0 makes it dip backward briefly before it starts, like a small wind-up.
Which curve fits which situation?
For elements entering the screen, an ease-out curve — fast start, soft landing — is usually the right call, since the user sees the result right away. Elements leaving the screen work better in reverse: ease-in starts slow and accelerates into the exit, which reads as more natural. For anything moving within the visible area, ease-in-out smooths both ends of the move. Duration follows a simple rule of thumb: cursor feedback should land in the 120–200ms range, and panels or menus opening should take 200–320ms. Overshoot curves grab attention, but they get irritating fast on small controls like buttons — save them for the first time an element appears.
Common mistakes
The default timing function is ease, not linear — giving everything a linear transition makes an interface feel mechanical. transition: all is another frequent mistake: it animates properties you never meant to touch and costs performance, so list the properties you're transitioning explicitly. Overshoot curves don't behave as expected on properties clamped to a 0–1 range, like opacity — the value has nowhere to go past the limit, so keep overshoot on transform instead. Multi-phase motion like a bounce or a spring can't be expressed with a single cubic curve either — that takes multiple keyframes or the linear() timing function. And don't forget to shorten — or skip — the duration for people who have prefers-reduced-motion turned on.