Cubic-Bezier Easing

A cubic-bezier defines the feel of an animation — not where it goes, but how it gets there. It's a timing curve that maps elapsed time to progress, so motion can start slow, snap fast, or overshoot instead of moving at a robotic constant speed.

Where you meet it

Any CSS transition or animation — it's the transition-timing-function.
The named keywords ease, ease-in, ease-out are just preset bezier curves.
Design tools and motion libraries export easing as four numbers — that's a cubic-bezier.

What it does

It takes a fraction of the duration that has passed (the x-axis, 0 to 1) and returns how far along the animation should be (the y-axis). A straight diagonal is linear — constant speed. Bend the line and the same animation suddenly feels eased, snappy, or springy.

Time can't run backwards, so x stays in 0–1 — but y is free to overshoot. That asymmetry is where the bounce lives.

How it works

The curve is pinned at two fixed ends and shaped by two control points you actually set: cubic-bezier(x1, y1, x2, y2). The start anchor sits at (0,0) and the end at (1,1); the two handles pull the curve between them, and the slope near each end decides how fast motion enters and exits.

/* "ease-out": fast start, gentle landing */
transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

/* a spring that overshoots, then settles */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

Time can't run backwards, so x stays in 0–1 — but y can go below 0 or above 1. A y above 1 flies past the target and springs back (overshoot); a y below 0 pulls back first (anticipation). That's how a bounce is built.

Watch out

x outside 0–1 is invalid and the whole function is ignored — only y may leave the box.
Overshoot moves the property past its end value; on positions or colors that can look broken, not bouncy.
The curve sets pacing, not duration — a great easing on a too-long transition-duration still feels sluggish.

Go deeper

Ein cubic-bezier definiert das Gefühl einer Animation — nicht wohin sie geht, sondern wie sie ankommt. Es ist eine Timing-Kurve, die vergangene Zeit auf Fortschritt abbildet: So kann Bewegung langsam starten, schnell zuschnappen oder überschwingen, statt mechanisch mit konstantem Tempo zu laufen.

Wo es vorkommt

In jeder CSS-transition oder animation — als transition-timing-function.
Die Keywords ease, ease-in, ease-out sind nur vordefinierte Bezier-Kurven.
Design-Tools und Motion-Libraries exportieren Easing als vier Zahlen — das ist ein cubic-bezier.

Was es tut

Es nimmt den Anteil der bereits vergangenen Dauer (die x-Achse, 0 bis 1) und gibt zurück, wie weit die Animation sein soll (die y-Achse). Eine gerade Diagonale ist linear — konstantes Tempo. Krümmt man die Linie, fühlt sich dieselbe Animation plötzlich gedämpft, knackig oder federnd an.

Zeit läuft nicht rückwärts, also bleibt x in 0–1 — aber y darf überschwingen. In dieser Asymmetrie wohnt der Bounce.

Wie es funktioniert

Die Kurve ist an zwei festen Enden verankert und wird durch zwei Kontrollpunkte geformt, die du wirklich setzt: cubic-bezier(x1, y1, x2, y2). Der Start-Anker liegt bei (0,0), das Ende bei (1,1); die zwei Griffe ziehen die Kurve dazwischen, und die Steigung an den Enden bestimmt, wie schnell die Bewegung ein- und austritt.

/* "ease-out": schneller Start, sanfte Landung */
transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

/* eine Feder, die überschwingt und sich einpendelt */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

Zeit läuft nicht rückwärts, also bleibt x in 0–1 — aber y darf unter 0 oder über 1. Ein y über 1 schießt übers Ziel hinaus und federt zurück (Overshoot); ein y unter 0 holt erst aus (Anticipation). So entsteht ein Bounce.

Worauf achten

x außerhalb von 0–1 ist ungültig und die ganze Funktion wird ignoriert — nur y darf die Box verlassen.
Overshoot schiebt die Eigenschaft über ihren Endwert hinaus; bei Positionen oder Farben wirkt das schnell kaputt statt federnd.
Die Kurve steuert das Tempo, nicht die Dauer — feines Easing auf einer zu langen transition-duration fühlt sich trotzdem träge an.