Was ist eine cubic-bezier-Beschleunigung?

Es ist eine Timing-Funktion für CSS-Übergänge und Animationen, definiert durch zwei Kontrollpunkte, geschrieben als cubic-bezier(x1, y1, x2, y2), die bestimmt, wie sich eine Eigenschaft über die Zeit ändert.

Kann der y-Wert über 1 oder unter 0 liegen?

Ja. y-Werte außerhalb von 0–1 lassen die Animation über- oder zurückschießen und erzeugen Bounce-ähnliche Effekte. Nur die x-Werte sind auf 0–1 beschränkt.

Wie verhält sich das zu ease und ease-in-out?

Diese Schlüsselwörter sind spezifische cubic-bezier-Kurven. Verwenden Sie die Voreinstellungen als Ausgangspunkt und ziehen Sie die Griffe zum Anpassen.

Wo füge ich das Ergebnis ein?

Verwenden Sie den cubic-bezier()-Wert als Timing-Funktion in einem transition oder animation, z. B. transition: all 0.4s cubic-bezier(...).

Wird etwas an einen Server gesendet?

Nein. Der Editor läuft vollständig im Browser und nichts wird hochgeladen.

Cubic-Bezier-Generator

Vorschau

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

transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);

So wird's verwendet

Ziehen Sie die beiden farbigen Griffe oder geben Sie genaue Werte für x1, y1, x2 und y2 ein.
Drücken Sie auf Wiederholen, um die Bewegung der Kurve vorzuschauen.
Kopieren Sie den cubic-bezier()-Wert oder die vollständige transition-Zeile in Ihr CSS.

So funktioniert es

Eine CSS-Beschleunigungskurve ist eine kubische Bezier-Kurve mit festen Endpunkten bei (0,0) und (1,1). Zwei Kontrollpunkte formen die Kurve dazwischen, und ihre Koordinaten sind die vier Zahlen in cubic-bezier(x1, y1, x2, y2). Die x-Werte müssen zwischen 0 und 1 bleiben (die Zeit läuft stets vorwärts), aber die y-Werte können unter 0 oder über 1 gehen, um Anticipation- oder Overshoot-Effekte zu erzeugen.

Funktionen

Ziehen zum Formen

Bewegen Sie die Griffe direkt auf der Kurve, um die gewünschte Beschleunigung zu finden.

Genaue Werte

Geben Sie präzise Koordinaten ein, wenn Sie eine Spezifikation oder ein Design-System einhalten müssen.

Echtzeit-Vorschau

Spielen Sie die Bewegung ab, um die Beschleunigung vor der Verwendung zu beurteilen.

Standard-Voreinstellungen

Starten Sie mit ease, linear, ease-in, ease-out oder ease-in-out und passen Sie an.

Kopierbereiter Code

Kopieren Sie den cubic-bezier()-Wert oder eine vollständige transition-Deklaration.

Einsatzbereiche

UI-Bewegung

Passen Sie an, wie Schaltflächen, Modals und Panels sich bewegen, damit Übergänge natürlich wirken.

Mikrointeraktionen

Fügen Sie kleinen Interaktionen einen leichten Overshoot oder Anticipation hinzu, um ihnen Persönlichkeit zu geben.

Konsistente Beschleunigung

Definieren Sie eine benutzerdefinierte Kurve und verwenden Sie sie projektübergreifend für ein einheitliches Gefühl.

Lernen

Sehen Sie, wie Kontrollpunkte Bewegung ändern, um Beschleunigungsfunktionen zu verstehen.

Hinweise

Die x-Werte sind auf 0–1 begrenzt, da die Zeit nicht rückwärts laufen kann.
Die y-Werte können 0–1 überschreiten, um Bounce- oder Overshoot-Effekte zu erzeugen.
Die integrierten Voreinstellungen nähern sich den Standard-CSS-Schlüsselwörtern an.
Alles läuft auf Ihrem Gerät; nichts wird hochgeladen.

FAQ

Was ist eine cubic-bezier-Beschleunigung?: Es ist eine Timing-Funktion für CSS-Übergänge und Animationen, definiert durch zwei Kontrollpunkte, geschrieben als cubic-bezier(x1, y1, x2, y2), die bestimmt, wie sich eine Eigenschaft über die Zeit ändert.
Kann der y-Wert über 1 oder unter 0 liegen?: Ja. y-Werte außerhalb von 0–1 lassen die Animation über- oder zurückschießen und erzeugen Bounce-ähnliche Effekte. Nur die x-Werte sind auf 0–1 beschränkt.
Wie verhält sich das zu ease und ease-in-out?: Diese Schlüsselwörter sind spezifische cubic-bezier-Kurven. Verwenden Sie die Voreinstellungen als Ausgangspunkt und ziehen Sie die Griffe zum Anpassen.
Wo füge ich das Ergebnis ein?: Verwenden Sie den cubic-bezier()-Wert als Timing-Funktion in einem transition oder animation, z. B. transition: all 0.4s cubic-bezier(...).
Wird etwas an einen Server gesendet?: Nein. Der Editor läuft vollständig im Browser und nichts wird hochgeladen.