In diesem Artikel
Was sind kubische Bézier-Kurven?
Eine kubische Bézier-Kurve ist eine mathematische Funktion, die in CSS verwendet wird, um das Timing von Animationen und Übergängen zu definieren. Geschrieben als cubic-bezier(x1, y1, x2, y2), beschreibt sie, wie eine Animation von Anfang bis Ende voranschreitet, indem sie die Zeit auf den Fortschritt entlang einer glatten, durch vier Kontrollpunkte definierten Kurve abbildet.
In CSS steuert die Funktion cubic-bezier() das Easing der Eigenschaften transition-timing-function und animation-timing-function. Statt einer linearen Bewegung ermöglicht sie natürlich wirkende Beschleunigungen und Abbremsungen, die reale physikalische Vorgänge nachahmen und UI-Animationen dadurch geschliffen und wohlüberlegt wirken lassen.
Die vier Kontrollwerte verstehen
Die Funktion cubic-bezier() nimmt vier Werte entgegen, die zwei Kontrollpunkte auf der Kurve definieren. Diese Kontrollpunkte bestimmen, wie die Animation beschleunigt und abbremst.
- X1 (0-1) – die horizontale Position des ersten Kontrollpunkts, die festlegt, wann die anfängliche Beschleunigungsphase endet
- Y1 (beliebiger Wert) – die vertikale Position des ersten Kontrollpunkts, die steuert, wie schnell die Animation startet. Werte über 1 erzeugen einen Überschwing-Effekt
- X2 (0-1) – die horizontale Position des zweiten Kontrollpunkts, die festlegt, wann die Abbremsphase beginnt
- Y2 (beliebiger Wert) – die vertikale Position des zweiten Kontrollpunkts, die steuert, wie die Animation endet. Werte über 1 erzeugen ein Überschwingen mit Nachfedern
Kostenlos testen – keine Registrierung erforderlich
Kubische Bézier-Kurve erstellen →Gängige Easing-Presets und wann man sie verwendet
CSS bietet mehrere integrierte Easing-Schlüsselwörter, die bestimmten cubic-bezier-Werten entsprechen. Das Verständnis dieser Presets hilft Ihnen, das richtige Gefühl für Ihre Animationen zu wählen.
- ease (0.25, 0.1, 0.25, 1.0) – die CSS-Voreinstellung, startet schnell und bremst dann sanft ab. Gut für die meisten Allzweck-Übergänge
- ease-in (0.42, 0, 1.0, 1.0) – startet langsam und beschleunigt. Am besten für Elemente, die den Bildschirm verlassen oder ausblenden
- ease-out (0, 0, 0.58, 1.0) – startet schnell und bremst ab. Ideal für Elemente, die den Bildschirm betreten oder erscheinen
- ease-in-out (0.42, 0, 0.58, 1.0) – langsamer Start und langsames Ende mit schnellerer Mitte. Geeignet für sich wiederholende Animationen oder Elemente, die auf dem Bildschirm bleiben
- linear (0, 0, 1, 1) – konstante Geschwindigkeit von Anfang bis Ende. Verwenden Sie es für Fortschrittsbalken, Ladespinner oder Farbübergänge, bei denen eine gleichmäßige Geschwindigkeit natürlich wirkt
Häufig gestellte Fragen
Unterstützen alle Browser cubic-bezier()?
Ja. Die Funktion cubic-bezier() wird seit IE 10 (2012) in allen großen Browsern unterstützt. Sie ist Teil der Spezifikationen für CSS Transitions und CSS Animations, die in Chrome, Firefox, Safari, Edge und allen modernen mobilen Browsern vollständig unterstützt werden.
Kann ich mit cubic-bezier() Feder- oder Sprunganimationen erstellen?
Kubische Bézier-Kurven können einfache Sprungeffekte annähern, indem Y-Werte größer als 1 (Überschwingen) verwendet werden. Zum Beispiel erzeugt cubic-bezier(0.34, 1.56, 0.64, 1) ein leichtes Überschwingen. Echte Federphysik mit mehreren Sprüngen erfordert jedoch CSS spring() (noch nicht breit unterstützt) oder JavaScript-Animationsbibliotheken wie GSAP oder Framer Motion.
Was ist der Unterschied zwischen CSS Transitions und CSS Animations?
CSS Transitions animieren zwischen zwei Zuständen, wenn sich eine Eigenschaft ändert (z. B. beim Hovern). CSS Animations verwenden Keyframes, um mehrstufige Sequenzen zu definieren, die in Schleife laufen und unabhängig ablaufen können. Beide nutzen dieselben Timing-Funktionen, einschließlich cubic-bezier(), um das Easing zwischen Zuständen oder Keyframes zu steuern.