Design · 4 min read
CSS Easing and cubic-bezier Explained
Good motion is one of the details that separates a polished interface from a clunky one, and it comes down to easing. This guide explains what easing is, why it matters, and how the cubic-bezier function lets you design your own.
Try it yourself with the related tool.
Build an easing curve →Advertisement
Why linear motion feels off
A linear animation moves at a constant speed from start to finish, which looks mechanical because almost nothing in the real world moves that way. Objects accelerate and decelerate. Easing recreates that natural feel by varying the speed over the animation's duration.
The built-in easings
CSS ships with a few keywords: ease (the default, a gentle start and end), ease-in (starts slow), ease-out (ends slow), and linear. These cover many cases, but each is just a preset cubic-bezier curve underneath.
Reading a cubic-bezier curve
The cubic-bezier(x1, y1, x2, y2) function defines a curve using two control points. The horizontal axis is time and the vertical axis is progress. A steep section means fast motion; a flat section means slow motion. Dragging the first point controls how the animation begins and the second how it ends.
Overshoot and bounce
Pushing a control point above 1 or below 0 makes the value overshoot its target and settle back, which creates a springy, playful effect. Use it for emphasis — a button or modal popping in — and keep essential UI transitions smoother.