CSS transition timing functions explained
What ease, linear, ease-in-out and cubic-bezier really do to motion, and how to pick a timing curve that feels natural instead of robotic.
What a timing function controls
A timing function does not change how long a transition runs, it changes how the value moves across that time. With linear, the property changes at a constant rate from start to finish, which reads as mechanical. With ease and its relatives, the rate speeds up or slows down along the way, which is why the same 300ms transition can feel snappy or sluggish depending only on the curve you choose. The duration is the budget, the timing function is how you spend it.
The built-in keywords
The preset keywords are shorthands for common curves. Ease starts slow, accelerates, then settles, and it is the default the browser uses. Ease-in starts slow and finishes fast, which suits elements leaving the screen. Ease-out starts fast and eases into place, which suits elements arriving. Ease-in-out is symmetric, gentle at both ends, and works well for toggles and hovers. Linear keeps a constant speed and is best reserved for spinners and continuous loops rather than interface motion.
Reading a cubic-bezier curve
Every keyword is really a cubic-bezier(x1, y1, x2, y2) under the hood, and you can write your own for finer control. The four numbers set two control points that bend the speed curve between start and finish. The material style curve cubic-bezier(0.4, 0, 0.2, 1) accelerates briskly then decelerates gently, which feels responsive without being abrupt. Values above 1 or below 0 on the y axis create overshoot, giving a subtle bounce as the value springs past its target and back.
Choosing a curve that feels right
Match the curve to the intent of the motion. For something the user summoned, like a menu opening, ease-out lands it quickly then softens so it does not feel jarring. For dismissals, ease-in lets the element gather speed as it leaves. Keep durations short, often 150ms to 300ms for interface feedback, because even a perfect curve feels heavy if it lingers. When in doubt, ease-in-out or the material curve are safe, natural defaults.