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
Can you explain the difference between animation-duration and animation-delay?
What are some common use cases for different animation-timing-functions?
Can you show how to combine these properties in a single animation?
Génial!
Completion taux amélioré à 2.08Dé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 !
