---
title: "Switch to cubic-bezier over ease and linear"
description: "A one-line upgrade for CSS animations: trade the default ease and linear for cubic-bezier(0.6, 0.6, 0, 1). It starts fast and settles slow, which reads as smooth. Push the curve past 1 and you get a bounce."
date: "2026-05-30"
tags: ["css", "animation", "easing", "frontend"]
---

[Necati Koçlu](https://x.com/necatikcl/status/1695168893789130807) 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.

```css
.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.