CSS-Generator für kubische Bézier-Muster

Kubische Bézier-Kurve Dokumentation

Was ist eine kubische Bézier-Kurve?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

CSS-Syntax

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Häufige Anwendungsfälle

Animierte Übergänge:Erstellen Sie flüssige Animationen für Elemente, die ihre Eigenschaften ändern.
Scroll-Effekte:Steuern Sie die Geschwindigkeit von Scroll-Animationen.
Interaktive Elemente:Definieren Sie, wie Elemente auf Benutzerinteraktionen wie Bewegen oder Klicken reagieren.
Motion Design:Erstellen Sie komplexe Bewegungsabläufe für UI-Elemente.

Beliebte Beschleunigungsfunktionen

Ease (default)

Beginnt langsam, beschleunigt schnell und verlangsamt sich dann wieder.

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

Linear

Konstante Geschwindigkeit von Anfang bis Ende.

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

Ease-in

Startet langsam, beschleunigt dann.

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

Ease-out

Startet schnell, bremst dann ab.

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

Tipps zum Erstellen benutzerdefinierter Kurven

Halten Sie x-Werte zwischen 0 und 1:Werte außerhalb dieses Bereichs können zu unerwartetem Verhalten führen.
Visualisieren der Kurve:Verwenden Sie das interaktive Diagramm, um zu verstehen, wie sich Änderungen auf die Animation auswirken.
Testen Sie mit echten Elementen:Zeigen Sie Ihre Kurve immer mit echten UI-Komponenten an, um sicherzustellen, dass sie sich richtig anfühlt.
Speichern von Voreinstellungen:Lesezeichen für nützliche Kurven für zukünftige Projekte.