Die transition-timing-function gibt die Geschwindigkeitskurve eines Übergangseffekts an. Sie bestimmt, wie schnell eine Animation beginnt und endet und das Tempo, mit dem sie fortschreitet.

transition-timing-function: time_function;

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

• ease - Standardwert. Ein Übergangseffekt mit einem langsamen Start, dann schnell, dann endet er langsam;
• linear - Es hat eine konstante Geschwindigkeit während des gesamten Übergangs;
• ease-in- Ein Übergangseffekt mit einem langsamen Start;
• ease-out - Ein Übergangseffekt mit einem langsamen Ende;
• ease-in-out - Ein Übergangseffekt mit einem langsamen Start und Ende und einer schnellen Mitte.

Lassen Sie uns das folgende Beispiel ausführen, um den Unterschied zwischen ihnen zu sehen. Der Übergang funktioniert nur beim Hover über den container.

Kubische Bezier-Kurve

Wir können auch die Funktion cubic-bezier() verwenden, um eine benutzerdefinierte timing-function zu erstellen. Diese Funktion nimmt vier Werte an, die die Kontrollpunkte einer kubischen Bezier-Kurve darstellen, welche die Form der Timing-Funktion bestimmt.

Hinweis

Keine Sorge. Wir benötigen keine mathematischen Kenntnisse, um die kubische Bezier-Funktion als CSS-Eigenschaftswert zu generieren. Wir können die Quelle cubic-bezier.com verwenden, um unsere benutzerdefinierten Funktionen zu generieren.

Betrachten wir das folgende Beispiel, um zu sehen, wie einfach es ist, es zu verwenden. Die cubic-bezier-Funktion wurde mit Hilfe des Ziehens der Punkte auf dieser Quelle erzeugt.

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