Cubic-Bezier-Generator

Ein cubic-bezier-Generator lässt dich eine CSS-Timing-Funktion visuell gestalten, indem du zwei Kontrollpunkte ziehst, und dann den exakten Wert cubic-bezier(x1, y1, x2, y2) kopieren. Der Editor begrenzt die horizontalen Koordinaten auf den Einheitskasten, erlaubt den vertikalen Koordinaten, ihn für Überschwingen zu verlassen, und zeigt die Kurve mit einer echten CSS-Transition als Vorschau, damit du das Gefühl beurteilen kannst, bevor du sie in ein Stylesheet einfügst.

Die Kurve lesen

Die Timing-Funktion ist eine kubische Bezier-Kurve mit festen Endpunkten P0 = (0,0) und P3 = (1,1). Die beiden Griffe setzen P1 = (x1, y1) und P2 = (x2, y2). Für einen gegebenen Zeitfortschritt x findet der Browser den Kurvenparameter t, bei dem x(t) = x gilt, und gibt dann y(t) zurück:

x(t) = 3(1−t)²t·x1 + 3(1−t)t²·x2 + t³
y(t) = 3(1−t)²t·y1 + 3(1−t)t²·y2 + t³

Da x1 und x2 auf [0,1] begrenzt sind, steigt x(t) monoton, es löst also genau ein t jede x-Gleichung. Die gestrichelte Diagonale auf der Zeichenfläche ist die lineare Funktion y = x, die Referenz, gegen die jede Kurve verglichen wird.

Schritt für Schritt

1. Mit einer Vorlage starten — klicke auf ease, ease-in-out, easeOutBack oder eine der anderen eingebauten Kurven, um bekannte Kontrollpunkte zu laden.
2. Einen Griff ziehen — bewege einen der runden Kontrollpunkte. Horizontales Ziehen ist auf den Einheitskasten begrenzt, vertikales nicht.
3. Den Live-Wert beobachten — die cubic-bezier(...)-Ausgabe aktualisiert sich bei jeder Zeigerbewegung.
4. Die Vorschau abspielen — animiere den Beispielpunkt mit deinem exakten Wert und vergleiche ihn mit dem linearen Punkt daneben.
5. Kopieren — klicke auf Kopieren und füge den Wert in transition-timing-function oder animation-timing-function ein.

Praxisbeispiele: Drei Easings bei 50 % Zeit

Vorlage	Wert	Ausgabefortschritt bei halber Dauer	Charakter
ease	cubic-bezier(0.25, 0.1, 0.25, 1)	y ≈ 0.802	Leicht vor linear, weicher Abschluss
easeOutBack	cubic-bezier(0.175, 0.885, 0.32, 1.275)	y ≈ 1.068	Bei 50 % schon über dem Ziel; Spitze nahe 1.087
easeInExpo	cubic-bezier(0.95, 0.05, 0.795, 0.035)	y ≈ 0.037	Bewegt sich kaum und rast dann am Ende

Die easeOutBack-Zahlen sind die nützlichen zum Merken: Über eine 400-ms-Transition schießt die Kurve ungefähr 9 % über die Endposition hinaus, etwa bei 63 % des Weges, und pendelt sich dann ein. Verkürze die Dauer, und der Bounce wirkt wie ein Schnappen; verlängere sie, und das Überschwingen wirkt träge.

Überschwingen, Antizipation und die x/y-Regel

Die x/y-Asymmetrie ist keine Eigenheit dieses Tools — sie ist die CSS-Spezifikation. Der Browser braucht x(t) als Funktion, deshalb müssen x1 und x2 in [0,1] liegen; der Generator begrenzt sie für dich. y1 und y2 dürfen jede reelle Zahl sein:

• y > 1 — das Element bewegt sich über sein Ziel hinaus und kehrt zurück. Wird für Toasts, Modals und Button-Pops genutzt.
• y < 0 — das Element bewegt sich zuerst rückwärts, bevor es vorwärts startet. Wird für Antizipation genutzt, wie ein Ausholen vor einem Wisch.
• Beides — easeInOutBack kombiniert einen Einbruch unter 0 mit einem Überschwingen über 1.

Genauigkeit und Grenzen

• Der Wert wird auf vier Nachkommastellen gerundet, bevor er ausgegeben wird, passend zur Genauigkeit, mit der diese Kurven üblicherweise geteilt werden.
• Die Bildschirmkurve wird durch numerisches Lösen für t abgetastet (Newton-Raphson, acht Iterationen). Bei extremen Kontrollpunktwerten können sich die visuelle Kurve und die des Browsers um eine Subpixel-Spur unterscheiden, der ausgegebene CSS-Wert ist aber exakt.
• Das Tool gibt nur die Timing-Funktion aus. Es erzeugt nicht den transition- oder @keyframes-Block, wählt keine Dauer und entscheidet nicht, welche Eigenschaft animiert wird.
• Eine Kurve kann keine nicht animierbare Eigenschaft reparieren und display nicht ausblenden lassen. Dieses Tool gestaltet Bewegung, es macht die Eigenschaft nicht animierbar.

Von der Kurve zum Stylesheet

Die erzeugte Zeichenkette ist nur die Timing-Funktion, sie passt also direkt in jede Transition oder Animation:

.button { transition: transform 180ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes pop { from { transform: scale(0.9); } to { transform: scale(1); } }
.toast { animation: pop 320ms cubic-bezier(0.68, -0.55, 0.265, 1.55) both; }

Zwei Gewohnheiten machen das einfacher. Erstens: Passe die Kurve an Distanz und Dauer an — ein starkes Überschwingen über eine lange Transition wirkt wie ein Wackeln, dieselbe Kurve bei 150 ms wirkt wie ein Schnappen. Zweitens: Halte einen kleinen Satz eigener Kurven in CSS-Variablen bereit, etwa --ease-snappy und --ease-bounce, damit einzelne Komponenten konsistent animieren, statt jeweils ihr eigenes Gefühl zu erfinden.

Häufige Fehler

• Alles überschwingen lassen. Eine Oberfläche, in der Buttons, Karten und Modals alle federn, wirkt unruhig. Reserviere Überschwingen für ein oder zwei zentrale Interaktionen pro Ansicht.
• Eine Kurve ohne ihre Dauer kopieren. Das Gefühl entsteht aus dem Paar; easeOutBack bei 150 ms und bei 800 ms sind völlig verschiedene Effekte.
• Ein negatives y für ungültig halten. Ist es nicht — es ist Antizipation, und Browser rendern sie. Das Tool erlaubt sie bewusst.
• Der translate-Vorschau für jede Eigenschaft vertrauen. Bewegung auf transform sagt wenig darüber, wie opacity oder Farbe interpolieren, weil die Kurve auf jede Eigenschaft einzeln wirkt.

Verwandte Tools

• CSS Box-Shadow-Generator — Mehrschichtige Box-Schatten mit Live-Vorschau gestalten.
• Border-Radius-Generator — Abgerundete Ecken visuell gestalten, inklusive elliptischer Radien.
• CSS Flexbox-Generator — Flexbox-Layouts visuell gestalten und das CSS kopieren.
• CSS Text-Shadow-Generator — Mehrschichtige Textschatten hinzufügen.