Propriedade CSS animation-duration
A propriedade animation-duration define o tempo que a animação demora a completar um ciclo. Veja alguns exemplos e experimente-os você mesmo.
A propriedade animation-duration define a duração (em segundos ou milissegundos) que uma animação demora a completar um ciclo. Muitas vezes utiliza-se a propriedade abreviada (shorthand) animation para definir todas as propriedades da animação de uma só vez. O valor predefinido da propriedade animation-duration é 0s, o que significa que a animação se completa instantaneamente e os keyframes não têm qualquer efeito visível. Os valores negativos são inválidos e fazem com que a propriedade seja ignorada. No entanto, algumas implementações mais antigas podem tratá-los como equivalentes a 0s.
Quando são especificados vários valores separados por vírgula para qualquer propriedade de animação, estes são aplicados por ordem às animações correspondentes definidas em animation-name. Se houver mais valores do que nomes de animação, os valores repetem-se ciclicamente a partir do início.
A propriedade animation-duration é uma das propriedades CSS3.
| Valor inicial | 0s |
|---|---|
| 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.animationDuration = "4s"; |
Sintaxe
Sintaxe da propriedade CSS animation-duration
animation-duration: time | initial | inherit;Exemplo da propriedade animation-duration:
Exemplo da propriedade CSS animation-duration com segundos
<!DOCTYPE html>
<html>
<head>
<style>
.element {
padding: 50px;
animation: pulse 7s infinite;
}
@keyframes pulse {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #eee
}
}
</style>
</head>
<body>
<div class="element">Background of this text is animated using CSS3 animation property</div>
</body>
</html>Exemplo da propriedade animation-duration com uma duração de 6 segundos:
Exemplo da propriedade CSS animation-duration com 6 segundos
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.element {
height: 200px;
width: 200px;
background-color: #1c87c9;
animation: nudge 6s ease infinite alternate, nudge 6s linear infinite alternate;
}
@keyframes nudge {
0%,
100% {
transform: translate(0, 0);
}
60% {
transform: translate(150px, 0);
}
80% {
transform: translate(-150px, 0);
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| time | Especifica a duração que uma animação demora a completar um ciclo. Os valores podem ser especificados em segundos (s) ou milissegundos (ms). Note que o valor predefinido da propriedade é 0s, e não a palavra-chave time. | Experimente » |
| initial | Faz com que a propriedade utilize o seu valor predefinido. | |
| inherit | Herda a propriedade do seu elemento pai. |