CSS Cubic-Bezier-Kurvengenerator mit Vorschau
Generieren Sie eine CSS cubic-bezier-Easing-Kurve mit Vorschau direkt im Browser.
🔒 100 % clientseitig — keine Daten gesendet
Dieses Tool erstellt cubic-bezier-Kurven für das Easing von CSS Animationen, mit visueller Bewegungsvorschau. Ziehen Sie die Kontrollpunkte und kopieren Sie den einfügefertigen Wert für Ihr Stylesheet. Alles läuft zu 100 % in Ihrem Browser, ohne externe Abhängigkeit.
What is it for?
- ▸ Ein individuelles Easing für eine flüssige CSS Transition erstellen
- ▸ Eine angepasste Ease-in-out-Beschleunigungskurve nachbilden
- ▸ Die Bewegung einer Animation vor der Integration in der Vorschau prüfen
- ▸ Einen fertigen cubic-bezier-Wert für eine transition-Eigenschaft kopieren
FAQ
Was ist eine cubic-bezier-Funktion in CSS?
Sie ist eine Easing-Funktion, die durch vier Werte definiert wird und steuert, wie eine Animation oder Transition im Zeitverlauf beschleunigt und abbremst.
Wie verwende ich einen cubic-bezier-Wert in meinem CSS?
Kopieren Sie den generierten Wert und setzen Sie ihn in eine transition-timing-function- oder animation-timing-function-Eigenschaft, zum Beispiel cubic-bezier(0.25, 0.1, 0.25, 1).
Kann ich mit cubic-bezier einen Bounce-Effekt erstellen?
Ja, wenn Sie Kontrollpunkte auf der vertikalen Achse außerhalb des Bereichs 0-1 platzieren, überschießt die Kurve das Ziel und erzeugt einen Bounce-Effekt.