oujood.com

Comment préciser le nombre de fois qu'une animation doit être exécutée?

Dans ce chapitre nous allons voir comment fonctionne la propriété css animation-iteration-count et comment l'utiliser avec des exemples.
La propriété animation-iteration-count indique le nombre de fois qu'une animation doit être jouée.

chercher |

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 CSS
animation-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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion43
4 -webkit-
1016
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.

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

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'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe