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 value0s
Aplica-se aall elements, ::before and ::after pseudo-elements
Inheritednão
Computed valueas specified
Animation typediscrete

Compatibilidade entre Navegadores

BCD tables only load in the browser

Veja também