Définition et utilisation da la propriété css animation-iteration-count
La propriété animation-iteration-count en CSS est utilisée pour définir le nombre de fois que l'animation sera répétée. Elle peut être définie comme infinie pour répéter l'animation indéfiniment. La Syntaxe CSSanimation-iteration-count: nombre|infinite|initial|inherit;
| Valeurs par défaut | 1 |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.animationIterationCount="infinite" |
Prise en charge de la propriété css animation-iteration-count dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  | |
|---|---|---|---|---|---|---|
| Verssion | 43 4 -webkit- | 10 | 16 5 -moz- | 9 4 -webkit- | 30 15 -webkit- 12 -o- |
Exemple Animation de l'arrière plan 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> La propriété css animation-iteration-count </title>
<style>
.oujood {
font-size: 40px;
text-align:center;
font-weight:bold;
color:#090;
padding-bottom:5px;
font-family:Times New Roman;
}
.oujood1 {
font-size:17px;
font-weight:bold;
text-align:center;
font-family:Times New Roman;
}
#oujood2 {
animation-name: exemple;
animation-duration: 2s;
/* L'animation sera répétée deux fois */
animation-iteration-count: 3;
}
#oujood3 {
animation-name: exemple;
animation-duration: 2s;
/* L'animation se répétera à l'infini */
animation-iteration-count: infinite;
}
@keyframes exemple {
from {
background-color: green;
}
to {
background-color: white;
}
}
</style>
</head>
<body>
<h1>www.oujood.com</h1>
<div class = "oujood">
oujood.com est un portail informatique pour développeurs
</div>
<div class = "oujood1">
A computer science portal for oujood
</div>
<h2 id="oujood2">
Ce texte change de couleur d'arrière plan trois fois.
</h2>
<h2 id="oujood3">
Ce texte change de couleur d'arrière plan un nombre de fois indéfini
</h2>
</body>
</html>
Modifier l'animation-iteration-count avec JavaScript
Exemple Modifier l'animation-iteration-count avec JavaScript 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> La propriété css animation-iteration-count </title>
<style>
div {
width: 100px;
height: 100px;
background: green;
border-radius: 50%;
position: relative;
animation: mymove 5s 1;
}
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
</style>
</head>
<body>
<h1>Changer la propriété css animation-iteration-count avec JavaScript</h1>
<p>Cliquez sur le bouton "CHANGER" pour faire jouer l'animation à l'infini !</p>
<button onclick="maFonction()"> CHANGER </button>
<div id="monDIV"></div>
<p><strong>Note:</strong> Cliquez sur le bouton AVANT que l'animation ne soit terminée ! Si non, cela n'aura aucun effet car l'animation ne recommencera pas une fois qu'elle sera terminée.</p>
<script>
function maFonction() {
document.getElementById("monDIV").style.animationIterationCount = "infinite";
}
</script>
</body>
</html>
Valeurs de la propriété animation-iteration-count
- nombre : Cette valeur de propriété est utilisée pour définir le nombre de fois qu'une animation doit être jouée. La valeur par défaut est 1.-infini : Cette valeur de propriété indique que l'animation doit être jouée un nombre infini de fois (sans fin).
-initial : Cette valeur de propriété est utilisée pour définir cette propriété à sa valeur par défaut.
-inherit : Cette valeur est utilisée pour hériter cette propriété de son élément parent.