Cubic-Bezier-Kurven-Generator

Die Beschleunigungskurve (Timing-Funktion) bestimmt, wie eine CSS-Transition oder -Animation im Zeitverlauf fortschreitet. Ziehen Sie die beiden Kontrollpunkte, testen Sie das Ergebnis in der Beispielanimation und kopieren Sie den cubic-bezier()-Wert.

Was ist cubic-bezier()?

Die Eigenschaften transition-timing-function und animation-timing-function (oder der dritte Wert von transition) legen fest, wie sich die Änderung über die Dauer verteilt. cubic-bezier(x1, y1, x2, y2) definiert eine kubische Bézierkurve, die bei (0, 0) beginnt und bei (1, 1) endet, mit zwei Kontrollpunkten: Die X-Achse ist die Zeit, die Y-Achse der Fortschritt.

Die CSS-Schlüsselwörter sind vordefinierte Kurven: ease entspricht cubic-bezier(0.25, 0.1, 0.25, 1), ease-in (0.42, 0, 1, 1), ease-out (0, 0, 0.58, 1) und ease-in-out (0.42, 0, 0.58, 1). Die Kurven easeIn…/easeOut… sind die klassischen Easing-Gleichungen von Robert Penner, die in vielen Animationsbibliotheken verwendet werden.

Tipps

X-Werte müssen zwischen 0 und 1 liegen, Y-Werte dürfen diesen Bereich verlassen: Unter 0 oder über 1 schießt die Animation über das Ziel hinaus und kehrt zurück – ein sanfter Federeffekt wie bei easeOutBack. Für Elemente, die auf dem Bildschirm erscheinen, eignen sich meist Ausgangskurven (ease-out), die schnell beginnen und am Ende abbremsen; für Elemente, die verschwinden, Eingangskurven (ease-in).

Dauern von 150 bis 400 ms sind in Benutzeroberflächen am gebräuchlichsten. Denken Sie daran, die Einstellung prefers-reduced-motion von Menschen zu respektieren, die weniger Animationen bevorzugen.