Animation-iteration-count - Propriété CSS
Résumé des caractéristiques de la propriété animation-iteration-count
infinite
1
animation-iteration-count
ne peut pas être animée.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 : autant qu'il y a d'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.
Pour une présentation générale des animations, reportez-vous à la page animation
.
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 est1
.Si la valeur est
0
, l'animation n'est pas visible, mais les événementsanimationstart
etanimationend
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 pageanimation
. - 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';
// ou
let el = document.getElementById('id');
el.style.animationIterationCount = '2';
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.
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');
// ou
$('#id').css('animationIterationCount', '2');
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
.
animation-iteration-count
.animations
animation-iteration-count
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
É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 2009Document de travail. -
Module CSS - Animations Niveau 2
Pas de changement.02 Mars 2023Document 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 :