Propriedade CSS animation-delay
A propriedade CSS animation-delay especifica quando uma animação irá começar. Veja os exemplos e experimente-os você mesmo.
A propriedade CSS animation-delay especifica quando uma animação irá começar. A animação pode começar mais tarde, imediatamente ou saltar para um ponto específico da linha temporal (utilizando um atraso negativo).
A propriedade animation-delay é uma das propriedades CSS3.
O valor predefinido é 0. São permitidos valores negativos. Quando se utilizam valores negativos, a animação começa como se já estivesse a ser reproduzida há N segundos/milissegundos.
Quando são especificados vários valores separados por vírgula para uma propriedade de animação, estes são aplicados ciclicamente de acordo com o número de animações definidas em animation-name.
Se os keyframes de uma animação omitirem o valor inicial, o browser utiliza os estilos calculados do elemento no momento em que a animação começa.
| Propriedade | Valor |
|---|---|
| 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.animationDelay = "1s"; |
Sintaxe
Sintaxe da propriedade CSS animation-delay
animation-delay: time | initial | inherit;Exemplo da propriedade animation-delay:
Exemplo da propriedade CSS animation-delay
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #1c87c9;
position: relative;
animation: delay 5s infinite;
animation-delay: 3s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example</h2>
<p>Here the animation starts after 3 seconds.</p>
<div></div>
</body>
</html>Exemplo da propriedade animation-delay com um valor negativo:
Exemplo da propriedade CSS animation-delay com valor negativo
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: delay 5s infinite;
animation-delay: -2s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example with negative value.</h2>
<p>Here, the animation will start as if it had already been playing for 2 seconds.</p>
<div></div>
</body>
</html>Exemplo da propriedade animation-delay especificada em milissegundos:
Exemplo da propriedade CSS animation-delay com milissegundos
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #8ebf42;
position: relative;
animation: delay 5s infinite;
animation-delay: 200ms;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example in milliseconds.</h2>
<p>Here, the animation will start after 200ms.</p>
<div></div>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| time | Define o número de segundos (s) ou milissegundos (ms) a aguardar antes de a animação começar. É opcional. | Experimente » |
| initial | Define a propriedade com o seu valor predefinido. | |
| inherit | Herda a propriedade do seu elemento pai. |