Propriété animation-iteration-count
La propriété animation-iteration-count
définit le nombre de répétitions de l'animation. Par défaut,
l'animation ne se répète qu'1 fois et
revient ensuite à son état initial.
Notre propriété, cependant, permet de définir
un nombre spécifique de répétitions ou même
de définir une répétition infinie.
Syntaxe
sélecteur {
animation-iteration-count: nombre entier ou décimal | infinite;
}
Valeurs
| Valeur | Description |
|---|---|
| Nombre |
Nombre défini de répétitions, après lesquelles l'animation s'arrêtera.
La position qu'elle occupera est régulée par
la propriété animation-fill-mode.
Il est possible de définir des valeurs décimales - dans ce cas, l'animation ne se jouera
que partiellement.
|
infinite |
L'animation se répétera indéfiniment. |
Valeur par défaut : 1.
Exemple . Nombre fini de répétitions
Dans cet exemple, l'animation ne se répétera que
3 fois, puis reviendra à son état
initial :
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 3;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Exemple . Valeur infinite
Et maintenant, l'animation se répétera indéfiniment :
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Voir aussi
-
la propriété
animation-name,
qui définit le nom de l'animation -
la propriété
animation-duration,
qui définit la durée de l'animation -
la propriété
animation-delay,
qui définit le délai avant l'exécution de l'animation -
la propriété
animation-timing-function,
qui définit la vitesse d'exécution de l'animation -
la propriété
animation-direction,
qui définit la direction de l'animation -
la propriété
animation-fill-mode,
qui définit l'état de l'animation -
la propriété
animation-play-state,
qui permet de mettre l'animation en pause -
la propriété
animation,
qui représente un raccourci pour les animations -
la règle
@keyframes,
qui définit les images clés de l'animation -
les transitions douces
transition, qui représentent une animation au survol d'un élément