Propriété CSS animation-iteration-count
La propriété CSS animation-iteration-count spécifie combien de fois l’animation doit être jouée. Elle est spécifiée par deux valeurs: number et infinite. La valeur par défaut est 1, mais on peut définir n'importe quel nombre. 0 ou les valeur négatives sont invalides. Si l'animation est définie par la valeur infinite, elle sera jouée indéfiniment.
Valeur initiale | 1 |
Appliquée à | Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::before et ::after |
Héritée | Non. |
Animable | Non. |
Version | CSS3 |
Syntaxe DOM | object.style.animationIterationCount = "infinite"; |
Syntaxe
animation-iteration-count: number | infinite | initial | inherit;
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
html, body {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 100px;
height: 100px;
margin: 30px 0;
border-radius: 50%;
animation-name: pulse;
}
.element-one {
background-color: #1c87c9;
animation-duration: 3s;
animation-iteration-count: 3;
}
.element-two {
margin: 0;
background-color: #83bf42;
animation-duration: 5s;
animation-iteration-count: 2;
}
@keyframes pulse {
0% { left: 0; }
50% { left: 50%; }
100% { left: 0; }
}
</style>
</head>
<body>
<h2>Exemple de l'animation-iteration-count</h2>
<p>La propriété animation-iteration-count définit le nombre des boucles d’animation.</p>
<div class="element-one"></div>
<div class="element-two"></div>
</body>
</html>
Voici un exemple, où l'animation est jouée indéfiniment.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
html, body {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 100px;
height: 100px;
margin: 30px 0;
border-radius: 50%;
animation-name: pulse;
}
.element-one {
background-color: #1c87c9;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.element-two {
margin: 0;
background-color: #83bf42;
animation-duration: 5s;
animation-iteration-count: 2;
}
@keyframes pulse {
0% { left: 0; }
50% { left: 50%; }
100% { left: 0; }
}
</style>
</head>
<body>
<h2>Exemple de l'animation-iteration-count</h2>
<p>définit le nombre des boucles d’animation.</p>
<div class="element-one"></div>
<div class="element-two"></div>
</body>
</html>
Valeurs
Valeur | Description |
---|---|
number | Définit combien de fois l’animation doit être jouée. La valeur par défaut est 1. |
infinite | Indique, que l’animation doit être jouée indéfiniment. |
initial | Définit la valeur initiale. |
inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
43.0+ 4.0-42.0 -webkit- |
16.0+ 5.0-15.0 -moz- |
9.0+ 5.1-8.0 -webkit- |
12.0+ 15.0-29.0 -webkit- |
Pratiquez vos connaissances
Quelle est la fonction de 'animation-iteration-count' dans CSS?
Correcte!
Incorrecte!