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).

animation-duration: 3s | 3000ms

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.

animation-timing-function: time_function

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.

animation-delay: 0.1s | 100ms

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