transition-delay

A propriedade CSS transition-delay (atraso de transição) determina o tempo de duração da espera antes de iniciar um efeito de transição(transition effect) quando seu valor muda.

Essa espera, ou atraso de transição, pode ser zero, positiva ou negativa:

Um valor de 0s(ou 0ms) iniciará o efeito de transição imediatamente.
Um valor positivo atrasará o inicio do efeito de transição de acordo com o tempo estabelecido.
Um valor negativo iniciará o efeito de transição imediatamente e parcialmente durante o efeito. Em outras palavras, o efeito será animado como se já tivesse sido executado pelo tempo estipulado.

Você pode especificar vários atrasos, o que é útil quando é necessário realizar a transição de várias propriedades. Cada atraso pode ser aplicado à propriedade correspondente como especificado pela propriedade de transição(transition-property (en-US)), que atua como uma lista mestre. Se existem menos atrasos do que o determinado pela lista mestre, a lista de valores de atraso será repetida até que seja suficiente. Se existem mais atrasos, a lista de valores de atraso será trucanda(limitada) ao combinar o número de propriedades. Em ambos os casos, a declaração CSS permacene válida.

Syntax

/* Valores de Tempo <time>  */
transition-delay: 3s;
transition-delay: 2s, 4ms;

/* Valores Globais */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;

Valores

<time>: Indica a quantidade de tempo de espera entre um valor de propriedade e o inicio do efeito de transição(transition effect).

Sintaxe Formal

<time># (en-US)

Exemplos

transition-delay: 0.5s

transition-delay: 1s

transition-delay: 2s

transition-delay: 4s

Especificações

Especificação	Status	Comentário
CSS Transitions The definition of 'transition-delay' in that specification.	Rascunho atual	Definição inicial

Initial value	`0s`
Aplica-se a	all elements, `::before` and `::after` pseudo-elements
Inherited	não
Computed value	as specified
Animation type	discrete

Compatibilidade com navegadores

BCD tables only load in the browser