Proprietà CSS animation-iteration-count
La proprietà CSS animation-iteration-count specifica il numero di volte in cui l'animazione deve essere riprodotta. Guarda gli esempi ed esercitati.
La proprietà CSS animation-iteration-count definisce quante volte deve essere riprodotta l'animazione. Accetta due tipi di valori: un numero o la parola chiave infinite. Il valore predefinito è 1. Zero è un valore valido (l'animazione non verrà riprodotta), ma i valori negativi non sono validi. La parola chiave infinite specifica che l'animazione deve ripetersi all'infinito.
Quando vengono specificati più valori separati da virgola, questi vengono applicati in sequenza alle animazioni definite in animation-name. Se i valori sono meno numerosi delle animazioni, l'elenco viene ripetuto. Se i valori sono più numerosi delle animazioni, quelli in eccesso vengono ignorati.
La proprietà animation-iteration-count è una delle proprietà CSS3.
| Valore iniziale | 1 |
|---|---|
| Si applica a | Tutti gli elementi e gli pseudo-elementi ::before e ::after. |
| Ereditata | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.animationIterationCount = "infinite"; |
Sintassi
Sintassi della proprietà CSS animation-iteration-count
animation-iteration-count: number | infinite | initial | inherit;Esempio della proprietà animation-iteration-count:
Esempio della proprietà CSS animation-iteration-count con un valore numerico
<!DOCTYPE html>
<html>
<head>
<title>Title of the 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% {
transform: translateX(0);
}
50% {
transform: translateX(50%);
}
100% {
transform: translateX(0);
}
}
</style>
</head>
<body>
<h2>The animation-iteration-count example</h2>
<p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</p>
<div class="element-one"></div>
<div class="element-two"></div>
</body>
</html>Esempio della proprietà animation-iteration-count con il valore "infinite":
Esempio della proprietà CSS animation-iteration-count con il valore infinite
<!DOCTYPE html>
<html>
<head>
<title>Title of the 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% {
transform: translateX(0);
}
50% {
transform: translateX(50%);
}
100% {
transform: translateX(0);
}
}
</style>
</head>
<body>
<h2>The animation-iteration-count example</h2>
<p>The animation-iteration-count property sets the number of times an animation cycle should be played before stopping.</p>
<div class="element-one"></div>
<div class="element-two"></div>
</body>
</html>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| number | Definisce quante volte deve essere riprodotta l'animazione. Il valore predefinito è 1. | Provalo » |
| infinite | L'animazione viene riprodotta senza interruzioni. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | |
| inherit | Eredita la proprietà dall'elemento genitore. |