Animation-iteration-count - Propriété CSS

animation-iteration-count

Résumé des caractéristiques de la propriété animation-iteration-count

Description rapide
Définit le nombre de fois qu'une animation doit être jouée.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
infinite
Pourcentages
Ne s'appliquent pas.
Valeur initiale
1
Héritée par défaut
Non.
Type d'animation
Not animable : la propriété animation-iteration-count ne peut pas être animée.
Module W3C
Module CSS - Animations
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)

Statut du document: WD (document de travail)

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

animation-iteration-count - Syntax DiagramSyntax diagram of the animation-iteration-count CSS property. See stylescss.free.fr for details. infinite infinite number number , ,animation-iteration-count:;animation-iteration-count:;
Schéma syntaxique de la propriété animation-iteration-count.
Détails sur les valeurs.

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 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 animation.

  • 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).

Javascript
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.

Javascript
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.

Javascript
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.

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.

JQuery
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.

Colonne 1
Capacité de prendre en charge de façon générale les animations en CSS.
Colonne 2
Prise en charge complète de la propriété 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

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

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 :

animation
Propriété résumée définissant la plupart des paramètres d'animation : durée, fonction d'accélération, nombre de répétition, direction, etc.
animation-composition
Définit comment interagissent plusieurs animations appliquées à la même propriété.
animation-delay
Temps d'attente avant le démarrage de l'animation.
animation-direction
Sens de l'animation (normal ou inverse).
animation-duration
Définit la durée totale d'un cycle d'animation.
animation-fill-mode
Définit le remplacement lorsque l'animation n'est pas en cours d'exécution.
animation-name
Définit l'animation à appliquer à l'élément.
animation-play-state
État de l'animation (en cours ou en pause).
animation-timeline
Associe l'animation à autre chose que le temps, par exemple le défilement d'un élément.
animation-timing-function
Définit la fonction d'accélération à utiliser pendant une animation.

Directives :

@keyframes
Définit le nom d'une animation et quelles sont les propriétés qui sont animées.