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.
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
