Cubic-Bezier-Kurve erstellen: Easing mit Live-Animation

So verwenden Sie es

Ziehen Sie einen Kontrollpunkt 1 oder Kontrollpunkt 2 im Diagramm. Klicken Sie auf einen Punkt und nutzen Sie die Pfeiltasten für kleine Schritte. Mit gehaltener Umschalttaste sind die Schritte größer.
Tragen Sie genaue Werte in x1 (0 bis 1), y1, x2 (0 bis 1) und y2 ein, wenn Sie eine präzise Kurve brauchen. Die x-Werte müssen zwischen 0 und 1 bleiben.
Drücken Sie eine Vorlage wie ease-in-out oder Abspielen unter Animationsvorschau, um zu sehen, wie der Ball der Kurve folgt.
Kopieren Sie die Deklaration unter CSS und verwenden Sie sie in einem Übergang oder einer Animation.

Was die vier Zahlen bedeuten

Eine kubische Bézier-Easing-Kurve beginnt bei (0; 0) und endet bei (1; 1). Ihre zwei Kontrollpunkte, (x1; y1) und (x2; y2), bestimmen ihre Form. Auf der waagerechten Achse steht der Anteil der verstrichenen Zeit, auf der senkrechten der Anteil der bisher gemachten Änderung. Die CSS-Spezifikation „Easing Functions“ (englisch) beschränkt die x-Werte der Kontrollpunkte auf den Bereich 0 bis 1, weil die Zeit nicht rückwärts laufen und nicht über das Ende hinausgehen kann.

Für die y-Werte gibt es keine solche Grenze. Ein y-Wert über 1 oder unter 0 lässt die Kurve überschwingen: Die Änderung geht über ihr Ende hinaus und kommt zurück, oder sie beginnt mit einer Bewegung in die Gegenrichtung.

cubic-bezier(x1, y1, x2, y2), wobei x1 und x2 zwischen 0 und 1 liegen

Die Vorlagen und die Animation

Das Schlüsselwort ease ist cubic-bezier(0.25, 0.1, 0.25, 1), ease-in ist cubic-bezier(0.42, 0, 1, 1), ease-out ist cubic-bezier(0, 0, 0.58, 1) und ease-in-out ist cubic-bezier(0.42, 0, 0.58, 1), so wie die Spezifikation sie angibt. Das lineare Easing ist eine gerade Linie, die auch die Kurve cubic-bezier(0, 0, 1, 1) zeichnet.

Der Ball durchläuft die Kurve als Zeitverlauf einer Animation, sodass Sie das Easing als Bewegung sehen. Verlangt Ihr Gerät reduzierte Bewegung, startet die Animation pausiert, und Abspielen startet sie.

Verwenden Sie eine sanfte Kurve wie ease-out für ein Element, das auf der Seite erscheint, und ease-in für eines, das sie verlässt.
Halten Sie einen Übergang kurz, damit das Easing spürbar wird und man nicht darauf warten muss.

Rechenbeispiel: der Fortschritt bei halber Zeit

Die Kurve ease-in-out, cubic-bezier(0.42, 0, 0.58, 1), ist um ihre Mitte symmetrisch. Bei halber Zeit hat sie daher genau die Hälfte der Änderung gemacht: Die Anzeige zeigt 0,5000.

Die Kurve ease, cubic-bezier(0.25, 0.1, 0.25, 1), liegt an derselben Stelle weiter vorn. Bei halber Zeit hat sie 0,8024 der Änderung gemacht. Sie bewegt sich also am Anfang schnell und wird am Ende langsamer.

Häufig gestellte Fragen

Was zeigt der Ball?

Der Ball läuft vom linken Ende der Bahn zum rechten, und seine Position folgt der Kurve: Die waagerechte Lage ist der bisher gemachte Anteil der Änderung. Geht die Kurve über 1 hinaus, fährt der Ball über das Ende der Bahn und wird dort abgeschnitten.

Warum dürfen die x-Werte nicht über 0 und 1 hinausgehen?

Die waagerechte Achse ist die Zeit, und die Kurve deckt die Zeit vom Start bis zum Ende ab. Ein Zeitpunkt vor dem Start oder nach dem Ende hat auf der Kurve keinen Platz. Die Spezifikation hält die x-Werte der Kontrollpunkte deshalb zwischen 0 und 1. Für die y-Werte gibt es diese Grenze nicht.

Was ist der Unterschied zwischen ease-in und ease-out?

ease-in beginnt langsam und wird zum Ende hin schneller, während ease-out schnell beginnt und am Ende langsamer wird. Die beiden Kurven sind Spiegelbilder voneinander, daher wird dieselbe Änderung umgekehrt gelesen.

Kann ich den Wert auch in einer Animation statt in einem Übergang verwenden?

Ja. Derselbe Wert cubic-bezier() funktioniert für animation-timing-function ebenso wie für transition-timing-function, daher kann die Deklaration an beiden Stellen verwendet werden.

Wird das, was ich ziehe oder eingebe, gespeichert oder an einen Server gesendet?

Nein. Die Kurve und die Animation entstehen in Ihrem Browser. Nichts wird gespeichert oder an unseren Server gesendet; kopieren Sie die Deklaration daher, bevor Sie die Seite verlassen.

Quellen

Zahlen und Text zuletzt geprüft: Dienstag, 10. November 2026.