CSS-Cubic-Bezier-Generator

Was ist CSS-Cubic-Bezier-Generator?

Der CSS-Cubic-Bezier-Generator ist ein kostenloser visueller Editor für die cubic-bezier()-Timing-Funktion, die CSS-Übergänge und -Animationen verwenden, gebaut für Frontend-Entwickler und Motion-Designer. Wähle ein Preset wie ease, linear, ease-in, ease-out oder ease-in-out, oder feintune die zwei Kontrollpunkte selbst: Die x-Werte werden auf den zulässigen Bereich 0–1 begrenzt, während die y-Werte über 1 hinaus oder unter 0 gehen können, um Overshoot und Anticipation zu erzeugen. Die Vorschau zeichnet die Kurve auf einem Einheitsquadrat, damit du Beschleunigung und Verzögerung auf einen Blick ablesen kannst, und die exakte Deklaration cubic-bezier(x1, y1, x2, y2) wird zum Kopieren erzeugt. Nutze ihn immer dann, wenn ein eingebautes Schlüsselwort zu generisch wirkt und du eine flottere, federndere oder bewusstere Bewegung möchtest.

So verwendest du CSS-Cubic-Bezier-Generator

1. Öffne die Einstellungen und wähle ein Start-Preset – ease, linear, ease-in, ease-out oder ease-in-out –, um die Kontrollpunkte vorzubelegen.
2. Ziehe die zwei runden Griffe in der Kurvenvorschau, um das Easing umzuformen, oder gib exakte Werte in die Felder x1, y1, x2 und y2 ein.
3. Halte x1 und x2 zwischen 0 und 1; schiebe y1 oder y2 über 1 oder unter 0, um der Bewegung Overshoot oder Anticipation hinzuzufügen.
4. Lies die Kurve gegen die gestrichelte lineare Grundlinie ab, um zu beurteilen, wie das Easing beschleunigt und verzögert.
5. Kopiere den erzeugten cubic-bezier()-Wert und füge ihn in deine transition-timing-function oder animation-timing-function ein.

Beispiele

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

Häufig gestellte Fragen

Was bedeuten die vier cubic-bezier-Zahlen?

Es sind die Koordinaten der zwei Kontrollpunkte: x1, y1 für den ersten Punkt und x2, y2 für den zweiten. Die Kurve beginnt immer bei (0,0) und endet bei (1,1); die Kontrollpunkte biegen sie dazwischen, was steuert, wie die animierte Eigenschaft im Zeitverlauf beschleunigt und abbremst.

Warum kann ich x1 oder x2 nicht über 1 setzen?

Die CSS-Spezifikation verlangt, dass die x-Koordinaten (Zeit) beider Kontrollpunkte zwischen 0 und 1 bleiben, damit die Timing-Funktion eine gültige Abbildung von Fortschritt auf Ausgabe bleibt. Dieses Tool begrenzt die x-Felder und die Ziehgriffe automatisch auf diesen Bereich. Die y-Werte dürfen dagegen 1 überschreiten oder unter 0 fallen, um Overshoot oder Anticipation zu erzeugen.

Wie erzeuge ich ein hüpfendes oder federndes Easing?

Schiebe einen der y-Werte über 1 (für Overshoot am Ende) oder unter 0 (für Anticipation am Anfang). Zum Beispiel schießt cubic-bezier(0.34, 1.56, 0.64, 1) über das Ziel hinaus, bevor es sich beruhigt, und gibt so ein federndes Gefühl ganz ohne JavaScript.

Wo verwende ich den erzeugten Wert?

Füge ihn als Wert von transition-timing-function oder animation-timing-function ein – zum Beispiel transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Er ersetzt Schlüsselwörter wie ease oder ease-in-out durch deine eigene Kurve.

Werden meine Daten an einen Server gesendet?

Nein. Der gesamte Editor läuft mit JavaScript in deinem Browser – die Kontrollpunkte und die Kurve werden lokal berechnet und nie hochgeladen, sodass er privat und nach dem Laden der Seite sogar offline funktioniert.