CSS-Easing- & Cubic-Bezier-Visualisierer
SVG-Griffe ziehen, Werte tippen oder aus 30+ benannten Kurven wählen. Live-Animationsvorschau und kopierbereite Ausgabe für Vanilla-CSS, GSAP und Framer Motion.
Was ist eine Cubic-Bezier-Kurve?
Eine Cubic-Bezier-Kurve ist eine parametrische Kurve, die durch vier Punkte definiert wird: einen Startpunkt (immer 0,0), einen Endpunkt (immer 1,1) und zwei Kontrollgriffe, deren Koordinaten du selbst wählen kannst. CSS, JavaScript-Animationsbibliotheken und die meisten Design-Tools nutzen diese Kurve, um den Animationsfortschritt (0 → 1) auf den Wertfortschritt (0 → 1) abzubilden — biegt sich die Kurve unter die Diagonale, hinkt die Animation zunächst hinterher und holt dann auf; biegt sie sich darüber, springt sie nach vorne und beruhigt sich am Ende. Die vier Zahlen cubic-bezier(x1, y1, x2, y2) sind schlicht die Koordinaten der beiden Griffe.
So nutzt du diesen Visualizer
Ziehe die beiden farbigen Griffe im SVG, um die Kurve zu formen, oder gib die vier Werte direkt ein. Wähle aus über 30 benannten Presets — Klassiker wie easeOutCubic, das komplette Robert-Penner-Set sowie moderne UI-Toolkit-Kurven (Material, Apple Swift-Out). Die Live-Vorschau animiert eine Beispielform mit deiner aktuellen Kurve, sodass du das Timing fühlst und nicht nur die Form siehst. Das Ausgabe-Panel liefert dasselbe Easing in drei Varianten: Vanilla-CSS cubic-bezier(), GSAP CustomEase und Framer-Motion-Array-Tupel — kopiere einfach die Variante, die zu deinem Stack passt.
Die richtige Kurve wählen
Verwende ease-out-Kurven (Griffe niedrig, dann hoch) für Eingänge — Inhalte erscheinen schnell und beruhigen sich danach, was responsiv wirkt. Nutze ease-in für Ausgänge — das Auge muss verschwindendem Inhalt nicht eng folgen. Setze ease-in-out für Bewegungen auf dem Bildschirm ein, etwa wenn eine Karte von einem Slot in einen anderen gleitet. Back- bzw. Overshoot-Kurven (bei denen y2 > 1 ist) verleihen verspielten Momenten Charakter, wirken in Finanz- oder Produktivitäts-UIs aber unreif. Linear ist für UI-Animationen selten die richtige Wahl — es fühlt sich für Menschen mechanisch an, auch wenn es mathematisch gleichmäßig ist.
Häufig gestellte Fragen
Warum liegen y-Werte manchmal außerhalb von 0–1?
x1 und x2 sind laut Spezifikation auf 0–1 begrenzt (Kontrollpunkte können sich nicht über die Enden der Zeitachse hinausbewegen), y1 und y2 dürfen jedoch unter 0 oder über 1 liegen. So funktionieren „Back“-Easings — der Wert schießt kurz über sein Ziel hinaus, bevor er sich einpendelt, wie eine Feder, die einrastet.Warum passt die Material-Kurve zu einem Wertesatz und Material 3 zu einem anderen?
(0.4, 0, 0.2, 1) erschien 2014 mit Material 1. Material 3 (2021) führte eine andere Familie ein, die auf einem eigenen Federsystem basiert und sich nicht auf eine einzelne Cubic-Bezier reduzieren lässt — was du hier siehst, ist die nächstliegende klassische Annäherung. Für exaktes Material-3-Timing solltest du Googles offizielle Tokens verwenden.Sollte ich Cubic-Bezier oder Federphysik nutzen?
Kann ich das in CSS ohne JavaScript animieren?
transition-timing-function und animation-timing-function; beide laufen ohne eine einzige Zeile JS auf dem Compositor-Thread des Browsers. Die Bibliotheksausgaben sind nur dann nützlich, wenn du ohnehin mit dieser Bibliothek animierst — dann setze die Cubic-Bezier in das ease-Feld ein.Welche Dauer ist richtig?
Funktionieren diese Kurven in mobilen WebViews?
cubic-bezier() ist seit CSS3 Teil der Spezifikation und wurde bis 2013 in jedem Mobil-Browser ausgeliefert. Die hier gezeigten Animationsarten (Transform: translate / rotate / scale) werden überall GPU-komponiert, sodass die Vorschau die Performance in der Produktion gut abbildet.