Betrachten wir alle möglichen Methoden zur Arbeit mit der Animationszeit.

animation-duration Eigenschaft

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

animation-duration: 3s | 3000ms

Führen Sie das folgende Beispiel aus und bewegen Sie den Mauszeiger über das Kästchen:

animation-timing-function Eigenschaft

animation-timing-function legt fest, wie die Animation im Zeitverlauf abläuft, und steuert die Beschleunigung und Verzögerung der Animation. Die animation-timing-function kann die gleichen Werte wie die Eigenschaft transition-timing-function annehmen. Es stehen mehrere vordefinierte Timing-Funktionen zur Verfügung, wie linear, ease und ease-in-out, oder es kann eine benutzerdefinierte kubische Bézier-Kurve mit der Funktion cubic-bezier() definiert werden.

animation-timing-function: time_function

Wenden wir verschiedene time_functions auf die Kästchen im Beispiel an:

animation-delay Eigenschaft

animation-delay legt die Zeitspanne fest, die vor dem Start der Animation verstreichen soll. Sie kann in Sekunden (s) oder Millisekunden (ms) angegeben werden.

animation-delay: 0.1s | 100ms

Im Beispiel werden den Boxen unterschiedliche Verzögerungen zugewiesen: