Anpassen von Übergängen mit Timing-Funktionen

Die transition-timing-function legt die Geschwindigkeitskurve eines Übergangseffekts fest. Sie bestimmt, wie schnell eine Animation beginnt und endet sowie das Tempo ihres Ablaufs.

transition-timing-function: time_function;

Es gibt wichtige Schlüsselwörter, die die verschiedenen time_functions beschreiben:

• ease – Standardwert. Ein Übergangseffekt mit langsamem Start, dann schnell, endet langsam;
• linear – Konstante Geschwindigkeit während des gesamten Übergangs;
• ease-in – Ein Übergangseffekt mit langsamem Start;
• ease-out – Ein Übergangseffekt mit langsamem Ende;
• ease-in-out – Ein Übergangseffekt mit langsamem Start und Ende sowie schnellem Mittelteil.

Im folgenden Beispiel wird der Unterschied zwischen ihnen deutlich. Der Übergang wird nur beim Hover über das container-Element ausgelöst.

Kubische Bézier-Kurve

Wir können auch die Funktion cubic-bezier() verwenden, um eine benutzerdefinierte timing-function zu erstellen. Diese Funktion nimmt vier Werte entgegen, die die Kontrollpunkte einer kubischen Bézier-Kurve darstellen und die Form der Timing-Funktion bestimmen.

Hinweis

Keine Sorge. Es sind keine mathematischen Kenntnisse erforderlich, um die cubic-bezier-Funktion als CSS-Eigenschaftswert zu generieren. Wir können die https://cubic-bezier.com/ Quelle verwenden, um unsere eigenen Funktionen zu generieren.

Betrachten wir das folgende Beispiel, um zu sehen, wie einfach die Anwendung ist. Die cubic-bezier-Funktion wurde mithilfe des Verschiebens der Punkte auf dieser Quelle generiert.

Daher können wir die Funktion oben in unsere css-Datei kopieren.