Propriedade CSS animation-delay
Exemplo
Inicie a animação após 2 segundos:
div {
animation-delay: 2s;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A animation-delay
propriedade especifica um atraso para o início de uma animação.
O valor de atraso de animação é definido em segundos (s) ou milissegundos (ms).
Valor padrão: | 0s |
---|---|
Herdado: | não |
Animavel: | não. Leia sobre animáveis |
Versão: | CSS3 |
Sintaxe JavaScript: | objeto .style.animationDelay="1s" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Números seguidos por -webkit-, -moz- ou -o- especificam a primeira versão que funcionou com um prefixo.
Property | |||||
---|---|---|---|---|---|
animation-delay | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Sintaxe CSS
animation-delay: time|initial|inherit;
Valores de propriedade
Value | Description | Play it |
---|---|---|
time | Optional. Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. Default value is 0. Negative values are allowed. If you use negative values, the animation will start as if it had already been playing for N seconds/milliseconds. | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Mais exemplos
Exemplo
Usando valores negativos. Aqui, a animação começará como se já estivesse tocando por 2 segundos:
div {
animation-delay: -2s;
}
Páginas relacionadas
Tutorial CSS: Animações CSS
Referência HTML DOM: propriedade animationDelay