Propriedade CSS animation-iteration-count
A propriedade CSS animation-iteration-count especifica o número de vezes que a animação deve ser reproduzida. Veja os exemplos e pratique.
A propriedade CSS animation-iteration-count define quantas vezes a animação deve ser reproduzida. Aceita dois tipos de valores: um número ou a palavra-chave infinite. O valor predefinido é 1. Zero é um valor válido (a animação não será reproduzida), mas os valores negativos são inválidos. A palavra-chave infinite especifica que a animação deve repetir-se indefinidamente.
Quando são especificados vários valores separados por vírgula, estes são aplicados sequencialmente às animações definidas em animation-name. Se houver menos valores do que animações, a lista é repetida. Se houver mais valores do que animações, os valores em excesso são ignorados.
A propriedade animation-iteration-count é uma das propriedades CSS3.
| Valor inicial | 1 |
|---|---|
| Aplica-se a | Todos os elementos e os pseudo-elementos ::before e ::after. |
| Herdada | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.animationIterationCount = "infinite"; |
Sintaxe
Sintaxe da propriedade CSS animation-iteration-count
animation-iteration-count: number | infinite | initial | inherit;Exemplo da propriedade animation-iteration-count:
Exemplo da propriedade CSS animation-iteration-count com um valor numérico
<!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>Exemplo da propriedade animation-iteration-count com o valor "infinite":
Exemplo da propriedade CSS animation-iteration-count com o valor 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>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| number | Define quantas vezes a animação deve ser reproduzida. O valor predefinido é 1. | Experimente » |
| infinite | A animação é reproduzida sem parar. | Experimente » |
| initial | Define a propriedade com o seu valor predefinido. | |
| inherit | Herda a propriedade do seu elemento pai. |