Accueil    CSS    Propriété animation-iteration-count
 



style css animation-iteration-count  Style CSS animation-iteration-count

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété css animation-iteration-count détermine le nombre de fois que l'animation sera jouée avant de s'arrêter. Il est possible de spécifier une valeur finie ou alors de lui-attribuer la valeur "infinite" pour qu'elle soit jouée en boucle.
Par défaut l'animation est jouée une seule fois et est ensuite stoppée.

Actuellement chaque navigateur se base sur sa propre version de la propriété animate, ce qui fait beaucoup de duplication de code css :
    - Chrome et safari utilisent les propriétés "-webkit-animation-iteration-count" et
      "@-webkit-keyframes"
    - Firefox utilise les propriétés "-moz-animation-iteration-count" et "@-moz-keyframes"
    - Opera utilise les propriétés "-o-animation-iteration-count" et "@-o-keyframes"
    - Internet Explorer n'implémente pas encore les animations css



Propriétés pour le style animation-iteration-count :




Propriété Définition Valeurs CSS
animation-iteration-count Spécifie le nombre de fois que l'animation sera jouée avant de s'arrêter infinite
valeur
CSS 3


Exemple d'utilisation du style css animation-iteration-count :




Animation jouée 5 fois et animation en boucle infinie


<style type="text/css">
.divRonde{
   display:inline-block;
   margin:20px;
   width:150px;
   height:150px;
   border:solid 1px black;
   background-color:lightsteelblue;
   border-radius:75px;
   line-height:150px;
   font-size:24px;
   text-align:center;
}

#animCount{
   animation-name:rotation; -webkit-animation-name:rotation;
   -moz-animation-name:rotation; -o-animation-name:rotation;
   animation-duration:3s; -webkit-animation-duration:3s;
   -moz-animation-duration:3s; -o-animation-duration:3s;
   animation-iteration-count:5; -webkit-animation-iteration-count:5;
   -moz-animation-iteration-count:5; -o-animation-iteration-count:5;
   animation-timing-function:linear; -webkit-animation-timing-function:linear;
   -moz-animation-timing-function:linear; -o-animation-timing-function:linear;
}

#animInfinite{
   animation-name:rotation; -webkit-animation-name:rotation;
   -moz-animation-name:rotation; -o-animation-name:rotation;
   animation-duration:3s; -webkit-animation-duration:3s;
   -moz-animation-duration:3s; -o-animation-duration:3s;
   animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite;
   animation-timing-function:linear; -webkit-animation-timing-function:linear;
   -moz-animation-timing-function:linear; -o-animation-timing-function:linear;
}

@keyframes rotation{
   from {transform:rotate(0deg);} to {transform:rotate(360deg);}
}
@-webkit-keyframes rotation{
   from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotation{
   from {-moz-transform:rotate(0deg);} to {-moz-transform:rotate(360deg);}
}
@-o-keyframes rotation{
   from {-o-transform:rotate(0deg);} to {-o-transform:rotate(360deg);}
}
</style>

<div id="animCount" class="divRonde">
   5 tours !
</div>

<div id="animInfinite" class="divRonde">
   Infini !
</div>


Animation jouée 5 fois et animation en boucle infinie

5 tours !
Infini !