animation-iteration-count

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété animation-iteration-count indique le nombre de cycles utilisés pour répéter une animation avant que celle-ci s'arrête. Si plusieurs valeurs sont indiquées, à chaque lancement de l'animation, c'est la valeur suivante de la liste qui est utilisée. Lorsqu'on arrive à la fin de la liste, on reprend avec la première valeur de la liste.

Généralement, on utilisera la propriété raccourcie animation afin de définir toutes les propriétés relatives à une animation.

Valeur initiale1
Applicabilitétous les éléments, ainsi que les pseudo-elements ::before et ::after
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeur avec un mot-clé */
animation-iteration-count: infinite;

/* Valeur avec une quantité */
/* Type <number>            */
animation-iteration-count: 3;
animation-iteration-count: 2.3;

/* Gestion de plusieurs animations */
animation-iteration-count: 2, 0, infinite;

Valeurs

infinite
L'animation sera répétée à l'infini.
<number>
Le nombre de répétitions pour l'animation. La valeur par défaut est 1 (elle n'est exécutée qu'une seule fois). Les valeurs négatives sont considérées comme invalides. Il est possible d'utiliser des valeurs qui ne sont pas entières pour indiquer des fragments d'un cycle (ainsi 0.5 indiquera une moitié du cycle de l'animation).

Syntaxe formelle

<single-animation-iteration-count>#


<single-animation-iteration-count> = infinite | <number>

Exemples

CSS

p {
  animation-duration: 3s;
  animation-name: glissement;
  animation-iteration-count: infinite;
}

.infini {
  animation-iteration-count: infinite; 
}

.dix {
  animation-iteration-count: 10; 
}

@keyframes glissement {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

HTML

<p class="infini">
  La Chenille et Alice se considérèrent un instant en silence.
  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
  la parole d’une voix endormie et traînante.
</p>

<p class="dix">
  Voyons si je me souviendrai de tout ce que je savais : quatre fois
  cinq font douze, quatre fois six font treize, quatre fois sept font
  — je n’arriverai jamais à vingt de ce train-là. 
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Animations
La définition de 'animation-iteration-count' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari (WebKit)
Support simple (Oui)-webkit
43.0
5.0 (5.0)-moz
16.0 (16.0)[1]
(Oui) 10  12 -o
12.10
4.0-webkit
Fonctionnalité Android Chrome Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile Chrome for Android
Support simple (Oui)-webkit ? 5.0 (5.0)-moz
16.0 (16.0)[1]
(Oui) ? ? ? 43.0
 

[1] En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, teoli, Sebastianz, FredB, tregagnon
 Dernière mise à jour par : SphinxKnight,