animation-iteration-count |
Compteur d'itération de l'animation |
| CSS3 |
|
Syntaxe
|
animation-iteration-count: number|infinite|inherit|initial;
|
Paramètres
| Paramètre |
Description |
| number |
Ce paramètre permet d'indiquer le nombre définissant combien de fois une animation doit être joué. La valeur par défaut est 1. |
| infinite |
Ce paramètre permet d'indiquer l'animation doit être jouer un nombre infini de fois. |
| 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 le nombre de fois que l'animation doit se produire.
Remarques
- Définition du nombre de répétitions : La propriété animation-iteration-count détermine combien de fois une animation doit se répéter. Elle permet de
définir si une animation doit s'exécuter une seule fois, plusieurs fois ou en boucle infinie.
- Valeur par défaut : Par défaut, animation-iteration-count est réglée sur 1. Cela signifie que l'animation s'exécutera une seule fois, après quoi elle
cessera et, sans animation-fill-mode, l'élément reviendra à son état initial.
- Répétitions infinies avec infinite : En utilisant la valeur infinite, l'animation se répète sans fin. Cela est particulièrement utile pour des effets
décoratifs, comme des fonds qui défilent ou des animations de chargement.
- Utilisation de valeurs décimales : La propriété accepte des valeurs décimales, comme 2.5, permettant une exécution partielle d'un cycle d'animation. Par exemple,
si une animation dure 4 secondes et que animation-iteration-count est 2.5, l'animation s'exécutera pendant 10 secondes.
- Impact sur la durée totale : La durée totale d'une animation dépend de la valeur de animation-duration multipliée par celle de
animation-iteration-count. Une animation de 3 secondes répétée 4 fois durera donc 12 secondes.
- Combinaison avec animation-direction : Lorsqu'elle est utilisée avec animation-direction, cette propriété affecte l'apparence des répétitions. Par
exemple, avec alternate, chaque itération alterne entre une animation normale et une animation inversée.
- Interaction avec les événements animationend : Le gestionnaire d'événements animationend n'est déclenché qu'après la dernière itération. Cela
signifie que dans le cas d'une répétition infinie, cet événement ne sera jamais appelé.
- Utilisation pour des animations contrôlées : animation-iteration-count est particulièrement utile pour créer des animations temporaires. Par exemple, dans
une interaction utilisateur, une animation peut être limitée à 3 itérations pour ne pas distraire ou surcharger l'utilisateur.
Dernière mise à jour : Dimanche, le 20 décembre 2015
