Considérons toutes les manières possibles de travailler avec le temps d'animation.

Propriété animation-duration

animation-duration définit le temps nécessaire pour qu'une animation complète un cycle (passage de l'état initial à l'état final), mesuré en secondes (s) ou millisecondes (ms).

animation-duration: 3s | 3000ms

Exécutons l'exemple suivant et survolons la boîte :

Propriété animation-timing-function

animation-timing-function détermine comment l'animation progresse dans le temps, contrôlant l'accélération et la décélération de l'animation. La propriété animation-timing-function peut avoir les mêmes valeurs que la propriété transition-timing-function. Plusieurs fonctions de synchronisation prédéfinies sont disponibles, telles que linear, ease et ease-in-out, ou nous pouvons définir une courbe de Bézier personnalisée en utilisant la fonction cubic-bezier().

animation-timing-function: time_function

Appliquons différentes time_functions aux boîtes dans l'exemple :

Propriété animation-delay

animation-delay définit le temps qui doit s'écouler avant le début de l'animation. Il peut être spécifié en secondes (s) ou en millisecondes (ms).

animation-delay: 0.1s | 100ms

Appliquons différents délais aux boîtes dans l'exemple :