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: allis 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 transforminstead. 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.