OUJOOD.COM
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.