animation-duration |
Durée de l'animation |
| CSS3 |
|
Syntaxe
|
animation-duration: temps|inherit|initial;
|
Paramètres
| Paramètre |
Description |
| temps |
Ce paramètre permet d'indiquer le nombre de secondes ou de millisecondes que doit durée l'animation. La valeur par défaut est 0. |
| inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
Description
Cette propriété permet d'indiquer la durée en secondes ou millisecondes de l'animation.
Remarques
- Définition de la durée de l'animation : La propriété animation-duration spécifie combien de temps une animation prend pour compléter un cycle complet,
de 0% à 100%. Cela permet d'ajuster la vitesse à laquelle les étapes définies dans les règles @keyframes sont exécutées.
- Unités de temps acceptées : La durée de l'animation peut être définie en secondes (s) ou en millisecondes (ms). Par exemple, une valeur de 2s correspond à
2 secondes, tandis que 500ms représente une demi-seconde. Ces unités permettent une grande précision dans la définition des durées.
- Valeur par défaut : Par défaut, si aucune valeur n'est spécifiée, la propriété animation-duration est définie sur 0s. Cela signifie que l'animation
s'exécutera instantanément ou ne sera pas visible, car sa durée est nulle.
- Durée infinie et animations fluides : Une durée longue, comme 10s ou plus, peut être utilisée pour créer des animations fluides ou de fond, comme un ciel
étoilé ou un effet de défilement lent. Cela est particulièrement utile pour les animations décoratives.
- Effet combiné avec d'autres propriétés : animation-duration fonctionne conjointement avec d'autres propriétés d'animation comme animation-delay
et animation-timing-function pour ajuster non seulement la vitesse globale de l'animation, mais aussi son comportement (par exemple, son accélération ou décélération).
- Impact sur les performances : Une durée plus courte (comme 0.1s) donne une animation rapide, mais peut sembler saccadée si elle est trop courte. En revanche,
une durée plus longue peut améliorer la fluidité, mais il faut veiller à ne pas ralentir l'expérience utilisateur, surtout pour les interactions critiques.
- Utilisation avec plusieurs animations : Lorsqu'une animation enchaîne plusieurs effets (grâce à des étapes dans @keyframes), la durée totale spécifiée par
animation-duration est divisée proportionnellement entre ces étapes. Par exemple, une durée de 4s répartira également le temps sur des étapes comme 0%, 50%, et 100%.
- Personnalisation pour chaque animation : Si plusieurs animations sont appliquées à un élément (via animation-name), leurs durées respectives peuvent être
définies séparément en listant plusieurs valeurs dans animation-duration, séparées par des virgules. Par exemple : animation-duration: 2s, 5s; pour des animations
distinctes.
Dernière mise à jour : Dimanche, le 20 décembre 2015
