Switch to cubic-bezier over ease and linear

Necati Koçlu shared a tip that's stuck with me: most animations look better the moment you stop using ease and linear and reach for a custom cubic-bezier. His go-to is cubic-bezier(0.6, 0.6, 0, 1). Hit play and watch the difference:

Why it reads as smoother

linear moves at a constant speed, which feels mechanical. ease is fine but generic, and it eases in and out symmetrically. cubic-bezier(0.6, 0.6, 0, 1) does something nicer: it leaves quickly and decelerates into a long, soft landing. Things that start fast and settle slow feel responsive and calm at the same time, which is most of what "smooth" means.

.thing {
  transition: transform 0.4s cubic-bezier(0.6, 0.6, 0, 1);
}

That's the whole change. Swap it in for your transitions and tween durations and the motion immediately feels more considered.

The four numbers

A cubic-bezier(x1, y1, x2, y2) is two control points pulling on the curve between start (0,0) and end (1,1). The x values are time, the y values are progress. The 0 and 1 in (0.6, 0.6, 0, 1) are what create that fast exit and slow finish.

The fun part: y values are allowed to go past 1. When they do, progress overshoots 100% and springs back, which is a bounce. cubic-bezier(0.34, 1.56, 0.64, 1) is the bouncy row in the demo above. No keyframes, no library, just a control point pushed out of bounds.

One practical note: keep a small set of named curves in your CSS (a smooth one, a bounce one) as custom properties and reuse them, instead of sprinkling different magic numbers everywhere. Consistent easing is a big part of why a UI feels like one thing.