cubic-bezier-Generator (CSS-Easing)
Zeichne Animationskurven cubic-bezier durch Ziehen der Kontrollpunkte, vergleiche mit ease, ease-in-out und anderen fertigen Kurven und kopiere das CSS des Übergangs.
So geht’sEditor für cubic-bezier-Kurven
Verfügbar auf: 
cubic-bezier-Generator (CSS-Easing): wofür es gut ist
Ziehe die zwei Kontrollpunkte im Diagramm oder wähle eine fertige Kurve wie ease, Feder und Antizipation. Passe die Dauer an und vergleiche die Animation deiner Kurve mit einer linearen, bevor du das CSS für transition oder animation kopierst.
So geht’s
- Wähle eine Vorlage oder ziehe die Punkte.
- Lege die Dauer fest und teste die Animation.
- Kopiere das CSS.
Wann nutzen
- Natürlichere Animationen in Oberflächen erstellen.
- Übergänge von Menüs und Modals anpassen.
- Easing-Funktionen studieren.
Häufige Fragen
Was ist cubic-bezier?
Es ist die Funktion, die die Beschleunigung eines CSS-Übergangs oder einer Animation festlegt. Die vier Zahlen sind die x- und y-Koordinaten von zwei Kontrollpunkten; x geht von 0 bis 1, und y darf diese Grenzen überschreiten, um einen Federeffekt zu erzeugen.
Welche Kurve nutze ich in Oberflächen?
Für Elemente, die in den Bildschirm kommen, wirken Kurven, die am Ende abbremsen, wie cubic-bezier(0.22, 1, 0.36, 1), natürlicher. Für Ausgänge bevorzuge Kurven, die beschleunigen, wie ease-in.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.