animation-iteration-count CSS propriété

Définition de la CSS animation-iteration-count.

La propriété d'Animation CSS animation-iteration-count permet de spécifier le nombre de fois qu'est joué l'animation CSS .

Exemple de syntaxe CSS animation-iteration-count :

animation-iteration-count : 5;
animation-iteration-count : infinite;

La propriété d'Animation CSS animation-iteration-count accepte une/des valeurs suivantes :

nombre entier qui spécifie le nombre de fois qu'est joué l'animation CSS.
Les nombres négatifs sont équivalents à 0. Par défaut, la valeur est 1.
infinite : l'animation CSS est jouée à l'infini.

Découvrez la page dédiée pour comprendre le principe de base d'une animation en CSS3.

Exemple de code animation-iteration-count CSS

Conditions d'application de la CSS animation-iteration-count.

La valeur de la CSS animation-iteration-count peut être mise directement dans la propriété de raccourci CSS animation.

Héritage des valeurs Css de animation-iteration-count.

Le nombre de répétition d'une animation CSS animation-iteration-count n'est pas hérité.

Problème d'interprétation de animation-iteration-count en Css.

La propriété d'Animation CSS animation-iteration-count pose des problèmes d'interprétation, n'est pas reconnue par Internet Explorer < 10 et Firefox < 19 et Opera < 12.1.

Règles de syntaxes CSS pour animation-iteration-count.

Règle d'écriture du nombre de répétition : animation-iteration-count

La propriété d'Animation CSS animation-iteration-count accepte une ou plusieurs valeurs nommées ci-dessus qui seront séparées par une virgule.
Le nombre de valeur est lié au nombre de nom déclarés dans la propriété d'Animation CSS animation-name.
Si vos itérations sont identiques, vous pouvez mettre une seule valeur.

Exemple d'écriture CSS de animation-iteration-count :

.mes-animations{
  animation-name : animation-une, animation-deux;
  animation-iteration-count : 5, infinite;
}

Compatibilités navigateurs de la propriété animation-iteration-count

Détails des versions de la CSS animation-iteration-count: Propriété animation-iteration-count est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS animation-iteration-count: Propriété CSS animation-iteration-count est compatible à partir de Chrome 43; Propriété CSS animation-iteration-count est compatible à partir de Firefox 16; Propriété CSS animation-iteration-count est compatible à partir de Internet Explorer 10; Propriété CSS animation-iteration-count est compatible à partir de Opera 12.10; Propriété CSS animation-iteration-count est incompatible pour Safari

Propriétés CSS préfixées de animation-iteration-count

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété animation-iteration-count CSS :

Pour Firefox 5.0+ et < 19, vous pouvez utiliser : -moz-animation-iteration-count.
Pour Chrome 2.1+ et Safari 4.0 +, vous pouvez utiliser : -webkit-animation-iteration-count.
Pour Opera 12+, vous pouvez utiliser : -o-animation-iteration-count. Pour info, il semble les versions préfixées pour les animations CSS soient supprimées sur la version 12.50 au profit des versions w3c non préfixées.
Il existe bien une propriété CSS -ms-animation-iteration-count mais qui est compatible Internet Explorer 10 (donc pas d'intérêt de la mettre). Personnellement, je n'ai trouvé aucune documentation officielle sur la propriété css -ms-animation-iteration-count

Votre avis sur la définition animation-iteration-count en CSS

Votez pour la définition CSS `animation-iteration-count`

Votes: 4.3 / 5 - 3 votes
Cliquez sur une étoile pour voter.