Définition de la Durée et du Minutage des Animations
Examinons toutes les méthodes possibles pour gérer la durée d'une animation.
Propriété animation-duration
animation-duration définit le temps nécessaire pour qu'une animation effectue un cycle complet (passage de l'état initial à l'état final), exprimé en secondes (s) ou en millisecondes (ms).
animation-duration: 3s | 3000ms
Exécutons l'exemple suivant et survolons la boîte :
index.html
index.css
Propriété animation-timing-function
animation-timing-function détermine la progression de l'animation dans le temps, en contrôlant l'accélération et la décélération de l'animation. La propriété animation-timing-function accepte 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 il est possible de définir une courbe de Bézier personnalisée à l'aide de la fonction cubic-bezier().
animation-timing-function: time_function
Appliquons différentes valeurs de time_function aux boîtes dans l'exemple :
index.html
index.css
Propriété animation-delay
animation-delay définit le temps à attendre avant le début de l'animation. Cette valeur peut être spécifiée en secondes (s) ou en millisecondes (ms).
animation-delay: 0.1s | 100ms
Application de délais différents aux boîtes dans l'exemple :
index.html
index.css
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.04Définition de la Durée et du Minutage des Animations
Glissez pour afficher le menu
Examinons toutes les méthodes possibles pour gérer la durée d'une animation.
Propriété animation-duration
animation-duration définit le temps nécessaire pour qu'une animation effectue un cycle complet (passage de l'état initial à l'état final), exprimé en secondes (s) ou en millisecondes (ms).
animation-duration: 3s | 3000ms
Exécutons l'exemple suivant et survolons la boîte :
index.html
index.css
Propriété animation-timing-function
animation-timing-function détermine la progression de l'animation dans le temps, en contrôlant l'accélération et la décélération de l'animation. La propriété animation-timing-function accepte 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 il est possible de définir une courbe de Bézier personnalisée à l'aide de la fonction cubic-bezier().
animation-timing-function: time_function
Appliquons différentes valeurs de time_function aux boîtes dans l'exemple :
index.html
index.css
Propriété animation-delay
animation-delay définit le temps à attendre avant le début de l'animation. Cette valeur peut être spécifiée en secondes (s) ou en millisecondes (ms).
animation-delay: 0.1s | 100ms
Application de délais différents aux boîtes dans l'exemple :
index.html
index.css
Merci pour vos commentaires !
