Animation-iteration-count - Propriété CSS
Résumé des caractéristiques de la propriété animation-iteration-count
infinite1animation-iteration-count ne peut pas être animée.Single : valeur unique (l'ordre n'intervient pas).Syntaxe de animation-iteration-count (schéma).
animation-iteration-count.Détails sur les valeurs.
Télécharger le schéma en SVG.
Description des termes utilisés sur le schéma (les termes en gras sont prédéfinis) :
numberest 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 est1.Si la valeur est
0, l'animation n'est pas visible, mais les événementsanimationstartetanimationendsont 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.
animation-iteration-count.animations
animation-iteration-countNavigateurs 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
Cette spécification introduit les changements de valeurs de propriétés au fil du temps. Les animations sont semblables aux transitions mais elles n'ont pas besoin d'un événement extérieur pour s'exécuter (code Javascript, action de l'utilisateur, etc.). Les différentes étape de l'animations sont contrôlées par une directive
@keyframes.
De nombreux paramètres peuvent être ajustés au moment d'appliquer une animation : nombre de répétitions, durée, l'animation inverse-t-elle son début et sa fin ou non, etc. Chacun de ces paramètres correspondant à une propriété.Concernantanimation-iteration-count. 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
Ce niveau 2 de la spécification introduit surtout les animations pilotées par un défilement. Celles-ci sont décrites dans un module séparés mais il y a nécessairement des interactions avec le module animation. En particulier la propriété
animation-timelineest introduite.
Une autre propriété est ajoutée :animation-compositionqui définit comment des animations se combinent lorsqu'elles sont appliquées à un même élément.Concernantanimation-iteration-count. 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 module CSS - Animations. En voici la liste, pour faciliter vos recherches :
Propriétés :
@keyframes.@keyframes) appliquer à l'élément.