Atributo animation-delay CSS

Definição e uso

animation-delay A propriedade define quando a animação começa.

Os valores de animation-delay são medidos em segundos ou milissegundos.

Dica:Permite valores negativos, -2s faz a animação começar imediatamente, mas pula 2 segundos para entrar no ciclo da animação.

Veja também:

Tutorial do CSS3:Animação CSS

Manual do HTML DOM:Propriedade animationDelay

Exemplo

Exemplo 1

Aguardar 2 segundos antes de começar a animação:

div {
  animation-delay: 2s;
}

Experimente você mesmo

Exemplo 2

Valores negativos, note que a animação pula 2 segundos para entrar no ciclo da animação:

div {
  animation-delay: -2s;
}

Experimente você mesmo

Sintaxe do CSS

animation-delay: tempo;
Valor Descrição Teste
tempo Opcional. Define o tempo de espera antes do início da animação, em segundos ou milissegundos. O valor padrão é 0. Teste

Detalhes técnicos

Valor padrão: 0
Herança: no
Versão: CSS3
Sintaxe do JavaScript: object.style.animationDelay="2s"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Números com -webkit-, -moz- ou -o- indicam a primeira versão com suporte ao prefixo.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
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-