Was ist das Standard-Easing in CSS?

Transitions und Animationen verwenden standardmäßig ease, was cubic-bezier(0.25, 0.1, 0.25, 1) entspricht: ein schneller Start und ein sanftes Ende.

Wie erzeuge ich ein Überschießen oder Federn?

Ziehe einen Griff über 1 oder unter 0. easeOutBack, cubic-bezier(0.34, 1.56, 0.64, 1), schießt über das Ziel hinaus und pendelt sich wieder ein. Eine einzelne kubische Bézierkurve kann nicht mehrfach federn; verwende dafür Keyframes oder die Funktion linear().

Kann ich denselben Wert für Animationen verwenden?

Ja. Der Wert funktioniert in transition-timing-function, animation-timing-function und in der Option easing der Web Animations API.

Cubic-Bezier-Generator

Forme CSS-Easing-Kurven, indem du zwei Griffe ziehst. Vergleiche die Bewegung mit linearem Timing und kopiere cubic-bezier() für Transitions oder Tailwind.

Kurveneditor

Ziehe einen der beiden Griffe. Die gestrichelte Linie zeigt lineares Timing.

Bewegungsvorschau

Deine Kurve

Linear

Position nach jedem Zehntel der Dauer

transition: transform 1000ms ease;
/* or */
animation-timing-function: ease;

Alles bleibt in deinem Browser.

Formatreferenzen

MDN — cubic-bezier()
W3C — CSS Easing Functions Level 1

Tool-Seite aktualisiert: 2026-10-25

Kurveneditor

Bewegungsvorschau

Anleitung und Beispiel

Ähnliche Tools

Formatreferenzen