Animation-iteration-count - Propriété CSS

Syntaxe de animation-iteration-count (schéma).

Description des termes utilisés sur le schéma (les termes en gras sont prédéfinis) :

• number est un nombre positif sans unité, c'est le nombre de répétitions.
• Plusieurs valeurs peuvent être indiquées séparées par des virgules, lorsqu'il y a plusieurs animations déclarées.

Description de la propriété animation-iteration-count.

animation-iteration-count définit combien de fois l'animation sera jouée. C'est à dire combien de fois le cycle from-to (défini par @keyframes) sera répété.

Pour une présentation générale des animations, reportez-vous à la page sur les animations en CSS.

Valeurs pour animation-iteration-count.

• animation-iteration-count: infinite;

  L'animation sera rejouée indéfiniment.

• animation-iteration-count: 3;

  Un nombre sans unité, positif, indiquant le nombre de fois que l'animation sera jouée.
  La valeur par défaut est 1.

  Si la valeur est 0, l'animation n'est pas visible, mais les événements animationstart et animationend sont déclenchés, et les propriétés animées sont fixées à leur valeur définies à la fin de l'animation.

  Il est possible de spécifier un nombre à virgule pour indiquer que l'animation doit être partiellement jouée.

• animation-iteration-count: 2, infinite, ...;

  Plusieurs valeurs séparées par une virgule. Cette syntaxe est utilisable lorsque plusieurs animations sont définies par animation-name. Pour plus de précisions sur les animations multiples, consultez la page sur les animations multiples.

• animation-iteration-count: initial; (1) animation-iteration-count: inherit; animation-iteration-count: revert; animation-iteration-count: revertLayer; animation-iteration-count: unset;

  Liens vers la présentation de ces valeurs : initial, inherit, revert, revert-layer, unset.

Possibilité d'animation de la propriété animation-iteration-count.

La propriété animation-iteration-count ne peut pas faire elle-même l'objet d'une animation. Aucune des autres propriétés qui gèrent les animations ne peut être animée.

La propriété animation-iteration-count et Javascript.

Modifier la valeur de animation-iteration-count en Javascript.

En Javascript, voici comment modifier la valeur de animation-iteration-count pour un élément el (deux syntaxes possibles).

let el = document.getElementById('id'); el.style['animation-iteration-count'] = '2.5'; // ou let el = document.getElementById('id'); el.style.animationIterationCount = '2.5';

Lire en Javascript la valeur de animation-iteration-count.

Pour ce code, la propriété doit avoir été affectée directement à l'élément lui-même, avec l'attribut style du code HTML, et non pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['animation-iteration-count']; // ou let el = document.getElementById('id'); let value = el.style.animationIterationCount;

Lire la valeur calculée de animation-iteration-count en Javascript.

La valeur calculée résulte de l'évaluation de la cascade des héritages. A défaut, ce sera la valeur initiale de la propriété (1 pour animation-iteration-count). Dans le cas de animation-iteration-count la valeur est renvoyée comme un nombre sans unité, qui peut comporter des décimales.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('animation-iteration-count');

Modifier la valeur de la propriété animation-iteration-count avec JQuery.


$('#id').css('animation-iteration-count', '2.5');
// ou
$('#id').css('animationIterationCount', '2.5');


Lire la valeur calculée de la propriété animation-iteration-count avec JQuery.

La valeur retournée est un nombre sans unité, comme en Javascript.

let value = $('#id').css('animation-iteration-count');

Autres exemples de code.

Consultez la page Javascript et CSS pour trouver d'autres exemples de code Javascript et JQuery.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété animation-iteration-count et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de animation-iteration-count.

Support de animation-iteration-count.

1

Support des
animations

2

Propriété
animation-iteration-count

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Évolution de la propriété animation-iteration-count.

• Module CSS - Animations Niveau 1

  Introduction des animations en CSS, et définition de la propriété animation-iteration-count.
  

  20 Mars 2009

  Document de travail.

  

  

  

• Module CSS - Animations Niveau 2

  Pas de changement.
  

  02 Mars 2023

  Document de travail.

  

  

  

Voir aussi, au sujet des animations.

Les propriétés concernant les animations est regroupées dans le module de spécification du W3C CSS Animations. En voici la liste, pour faciliter vos recherches :

Propriétés :

Directives :