Festlegen der Animationszeit

Betrachten wir alle möglichen Möglichkeiten, mit der Animationszeit zu arbeiten.

animation-duration Eigenschaft

animation-duration legt die Zeit fest, die benötigt wird, damit eine Animation einen Zyklus abschließt (Übergang vom Anfangs- zum Endzustand), gemessen in Sekunden (s) oder Millisekunden (ms).

Lassen Sie uns das folgende Beispiel ausführen und den Kasten schweben lassen:

animation-timing-function Eigenschaft

animation-timing-function bestimmt, wie die Animation im Laufe der Zeit fortschreitet und steuert die Beschleunigung und Verzögerung der Animation. Die animation-timing-function kann die gleichen Werte wie die transition-timing-function Eigenschaft haben. Es sind mehrere vordefinierte Timing-Funktionen verfügbar, wie linear, ease und ease-in-out, oder wir können eine benutzerdefinierte kubische Bezierkurve mit der Funktion cubic-bezier() definieren.

Lassen Sie uns verschiedene time_functions auf die Kästen im Beispiel anwenden:

animation-delay Eigenschaft

animation-delay legt die Zeit fest, die vergehen soll, bevor die Animation beginnt. Sie kann in Sekunden (s) oder Millisekunden (ms) angegeben werden.

Lassen Sie uns unterschiedliche Verzögerungen auf die Boxen im Beispiel anwenden: