animation-iteration-count - Propriété CSS
Résumé des caractéristiques de la propriété animation-iteration-count
infinite
(plusieurs valeurs peuvent être précisées dans le cas d'animations multiples).infinite
1
animation-iteration-count
ne peut pas être animée.Description.
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
.
Syntaxes pour animation-iteration-count
.
number
est un nombre sans unité, c'est le nombre de répétitions.
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
; animation-iteration-count:inherit
; animation-iteration-count:revert
; animation-iteration-count:revert-layer
; animation-iteration-count:unset
;La valeur initiale est :
.1
Animation de 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.
Manipulation de la propriété animation-iteration-count
par programme.
Le cercle bleu ci-dessous est l'élément qui nous servira de démonstration. L'animation (sur sa marge gauche) peut être
lancée par le bouton, et s'exécutera une fois par défaut. Les différents codes donnés en exemple ci-après modifient
la valeur de la propriété animation-iteration-count
, donc le nombre de répétitions de l'animation.
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).
function setAnimationIterationCount(el) {
el.style['animation-iteration-count']='2';
// ou
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.
function getAnimationIterationCount(el) {
alert(el.style['animation-iteration-count']);
// ou
alert(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.
function getCalcAnimationIterationCount(el) {
alert(window.getComputedStyle(el).getPropertyValue('animation-iteration-count'));
}
Modifier la valeur de la propriété animation-iteration-count
avec JQuery.
function setAnimationIterationCount(el) {
$(el).css('animation-iteration-count','1.25');
// ou
$(el).css('animationIterationCount','1.25');
}
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.
function getCalcAnimationIterationCount(el) {
alert($(el).css('animation-iteration-count'));
// ou
alert($(el).css('animationIterationCount'));
}
Prise en charge par les navigateurs (compatibilité).
animation-iteration-count
.
animation-iteration-count
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que animation-iteration-count
.
Les spécifications CSS éditées par le W3C sont organisées en modules. animation-iteration-count
fait partie du Module CSS - Animations (CSS Animations). Les définitions suivantes sont également décrites dans ce même module.