Easing-Funktionen: ease, linear, cubic-bezier

Eine Easing-Funktion steuert die Geschwindigkeitskurve einer Transition oder Animation – also, wie stark sie während ihrer Dauer beschleunigt oder abgebremst wird.

linear hält während der gesamten Transition eine konstante Geschwindigkeit. Das ist nützlich für Ladebalken und Fortschrittsanzeigen, bei denen eine gleichmäßige Bewegung erwartet wird.

ease beginnt schnell und wird gegen Ende langsamer. Dies ist der Standardwert und wirkt bei den meisten UI-Transitionen natürlich.

ease-in beginnt langsam und beschleunigt dann. Das eignet sich für Elemente, die den Bildschirm verlassen (Exit-Animationen).

ease-out beginnt schnell und wird dann langsamer. Das eignet sich hervorragend für Elemente, die in den Bildschirm eintreten – sie kommen dynamisch an und werden sanft langsamer.

ease-in-out beginnt und endet langsam, mit einer schnelleren Bewegung in der Mitte. Das eignet sich am besten für Schleifen- oder Hin-und-her-Animationen.

Definiert eine benutzerdefinierte kubische Bézier-Kurve mit vier Kontrollpunkten. Dadurch werden federähnliche und benutzerdefinierte Easing-Kurven ermöglicht.

Die vier Werte definieren zwei Kontrollpunkte: cubic-bezier(x1, y1, x2, y2). Werte über 1 auf der y-Achse erzeugen Überschwingeffekte (Feder-Effekte). Verwenden Sie Tools wie easings.net, um Kurven zu visualisieren.

steps(n, direction) teilt die Animation in n gleich große diskrete Schritte auf. Das ist ideal für Sprite-Animationen und Schreibmaschineneffekte.

Das zweite Argument legt fest, wann der Schritt erfolgt:

• jump-start: erster Schritt bei Zeit 0
• jump-end: letzter Schritt am Ende (Standard)
• jump-both: Schritte sowohl am Anfang als auch am Ende
• jump-none: kein Schritt an beiden Enden

Mit der neuen Funktion linear() können Sie beliebige Easing-Kurven anhand mehrerer Punkte definieren. Dadurch werden Feder- und Sprungeffekte in reinem CSS ermöglicht, ohne die Einschränkungen von cubic-bezier.

Easing-Funktionen steuern die Geschwindigkeitskurven von Animationen. Integrierte Optionen sind linear, ease, ease-in, ease-out und ease-in-out. Für benutzerdefinierte Kurven verwenden Sie cubic-bezier(). Diskrete Schritte verwenden steps(). Die neue Funktion linear() ermöglicht komplexe, federähnliche Kurven.