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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Essa espera, ou atraso de transição, pode ser zero, positiva ou negativa:
- Um valor de
0s
(ou0ms
) 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
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 entre Navegadores
BCD tables only load in the browser