Was bedeuten die vier Zahlen in cubic-bezier()?

Es sind die x- und y-Koordinaten von zwei Kontrollpunkten: cubic-bezier(x1, y1, x2, y2). Start und Ende der Kurve sind bei (0,0) und (1,1) fixiert, und diese beiden Griffe biegen den Pfad dazwischen, um festzulegen, wie die Animation beschleunigt.

Warum müssen die x-Werte zwischen 0 und 1 bleiben?

In CSS ist die x-Achse der Animationsfortschritt über die Zeit, der sich nur vorwärts bewegt. x1 und x2 in 0 bis 1 zu halten garantiert, dass die Kurve zu jedem Moment einen einzigen Wert darstellt. y kann außerhalb dieses Bereichs liegen, um Overshoot oder Vorspannung zu erzeugen.

Wie erzeuge ich ein federndes oder überschießendes Easing?

Gib einem Kontrollpunkt ein y größer als 1 oder kleiner als 0. Zum Beispiel schießt cubic-bezier(0.34, 1.56, 0.64, 1) über das Ende hinaus, bevor es sich setzt, was als sanfter Bounce wahrgenommen wird. Ziehe dazu einen Griff über oder unter den Plot.

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

ease ist cubic-bezier(0.25, 0.1, 0.25, 1) und startet einen Tick schneller als ease-in-out, das cubic-bezier(0.42, 0, 0.58, 1) und symmetrisch ist. ease-in-out rampt gleichmäßig hoch und verlangsamt sich, während ease die Bewegung leicht vorne belastet.

Kann ich diesen Wert auch für animation-timing-function verwenden?

Ja. Ein cubic-bezier() funktioniert überall dort, wo CSS eine Easing-Funktion akzeptiert, einschließlich transition-timing-function, animation-timing-function und dem Timing-Slot der transition- und animation-Shorthands.

Sendet das Ziehen der Kurve etwas an einen Server?

Nein. Der Editor, die animierte Vorschau und das erzeugte CSS werden alle in deinem Browser mit reinem JavaScript berechnet. Nichts über deine Kurve wird zu ArrayKit hochgeladen.

Cubic Bezier Generator

Ziehe zwei Kontrollpunkte, um eine CSS-cubic-bezier()-Easing-Kurve zu formen, sieh die Bewegung in der Vorschau und kopiere die Timing-Funktion — alles in deinem Browser.

Der Cubic Bezier Generator läuft vollständig in deinem Browser. Die Kurve, die du ziehst, die Animationsvorschau und das erzeugte cubic-bezier()-CSS verlassen niemals dein Gerät und nichts wird zu ArrayKit hochgeladen.

CSS Formatter öffnen

Über Cubic Bezier Generator

Der Cubic Bezier Generator lässt dich eine CSS-Easing-Kurve formen, indem du ihre zwei Kontrollpunkte über einen Live-Plot ziehst, und kopiert dann die exakte cubic-bezier(x1, y1, x2, y2)-Timing-Funktion für deinen Übergang oder deine Animation. Starte von benannten Presets wie ease, ease-in-out oder einem federnden ease-out-back, dann feinjustiere die Griffe mit der Maus oder den Pfeiltasten. Ein animierter Punkt spielt deine Kurve in Echtzeit ab, sodass du die Beschleunigung spürst, bevor du sie einfügst. Gebaut für Frontend-Entwickler und Designer, die Bewegung für eine transition-timing-function oder animation-timing-function abstimmen, ohne bei Zahlen zu raten. Alles rendert auf deinem Gerät — die Kurve, die Vorschau und das erzeugte CSS verlassen niemals deinen Browser.

Funktionen

Ziehe zwei Kontrollpunkte über eine Live-Kurve, um das Easing zu formen
Benannte Presets: linear, ease, ease-in, ease-out, ease-in-out und back-Kurven
Animierter Punkt und Scale-/Opacity-Demo spielen die Kurve in Echtzeit ab
Kopiert den exakten cubic-bezier()-Wert und eine fertige transition-timing-function-Regel
Verschiebe jeden Griff mit Pfeiltasten für pixelgenaues Justieren
Overshoot-Griffe lassen dich federnde ease-back-Kurven mit y über 1 bauen
x-Werte werden automatisch in den CSS-erforderlichen Bereich 0 bis 1 geklemmt
Erkennt und beschriftet die aktuelle Kurve, wenn sie einem Standard-Preset entspricht

So verwendest du Cubic Bezier Generator

Wähle ein Preset wie ease-in-out als Ausgangspunkt
Ziehe einen Kontrollpunkt, um die Kurve umzuformen, oder verschiebe ihn mit Pfeiltasten
Beobachte die animierte Vorschau, um die gebaute Beschleunigung zu spüren
Kopiere den cubic-bezier()-Wert oder die vollständige transition-timing-function-Regel
Füge sie in dein CSS-transition- oder -animation-Shorthand ein

Beispiel

Eingabe

control point 1: 0.34, 1.56
control point 2: 0.64, 1

Ausgabe

.card {
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

Eine ease-out-back-Kurve schießt für einen dezenten Bounce über 1 hinaus.

Häufige Fehler & Fehlerbehebung

Der Browser ignoriert mein cubic-bezier() und fällt auf linear zurück. — Beide x-Werte müssen zwischen 0 und 1 liegen. Dieses Tool klemmt sie für dich, aber ein von Hand getipptes x1 oder x2 außerhalb dieses Bereichs macht den ganzen Wert ungültig.
Die Animation wirkt am Anfang und Ende steif. — Ziehe jeden Griff weiter von seinem Endpunkt weg. Griffe nahe (0,0) und (1,1) biegen die Kurve kaum, sodass die Bewegung nahezu linear bleibt.
Ich will einen Bounce, aber der y-Wert schnappt zurück. — Ziehe einen Kontrollpunkt über die Oberkante des Plots, sodass sein y über 1 (oder unter 0) geht. Nur x ist eingeschränkt; das y-Overshoot ist es, was Vorspannung und Bounce erzeugt.
Mein Preset wurde nach dem Ziehen eines Griffs nicht mehr erkannt. — Jede Änderung macht die Kurve individuell, sodass die Preset-Beschriftung verschwindet. Klicke den Preset-Chip erneut an, um zu seinen exakten Werten zurückzuschnappen.

Häufig gestellte Fragen

Was bedeuten die vier Zahlen in cubic-bezier()?: Es sind die x- und y-Koordinaten von zwei Kontrollpunkten: cubic-bezier(x1, y1, x2, y2). Start und Ende der Kurve sind bei (0,0) und (1,1) fixiert, und diese beiden Griffe biegen den Pfad dazwischen, um festzulegen, wie die Animation beschleunigt.
Warum müssen die x-Werte zwischen 0 und 1 bleiben?: In CSS ist die x-Achse der Animationsfortschritt über die Zeit, der sich nur vorwärts bewegt. x1 und x2 in 0 bis 1 zu halten garantiert, dass die Kurve zu jedem Moment einen einzigen Wert darstellt. y kann außerhalb dieses Bereichs liegen, um Overshoot oder Vorspannung zu erzeugen.
Wie erzeuge ich ein federndes oder überschießendes Easing?: Gib einem Kontrollpunkt ein y größer als 1 oder kleiner als 0. Zum Beispiel schießt cubic-bezier(0.34, 1.56, 0.64, 1) über das Ende hinaus, bevor es sich setzt, was als sanfter Bounce wahrgenommen wird. Ziehe dazu einen Griff über oder unter den Plot.
Was ist der Unterschied zwischen ease und ease-in-out?: ease ist cubic-bezier(0.25, 0.1, 0.25, 1) und startet einen Tick schneller als ease-in-out, das cubic-bezier(0.42, 0, 0.58, 1) und symmetrisch ist. ease-in-out rampt gleichmäßig hoch und verlangsamt sich, während ease die Bewegung leicht vorne belastet.
Kann ich diesen Wert auch für animation-timing-function verwenden?: Ja. Ein cubic-bezier() funktioniert überall dort, wo CSS eine Easing-Funktion akzeptiert, einschließlich transition-timing-function, animation-timing-function und dem Timing-Slot der transition- und animation-Shorthands.
Sendet das Ziehen der Kurve etwas an einen Server?: Nein. Der Editor, die animierte Vorschau und das erzeugte CSS werden alle in deinem Browser mit reinem JavaScript berechnet. Nichts über deine Kurve wird zu ArrayKit hochgeladen.