Atraso de transição - CSS-Tricks

A transition-delaypropriedade, normalmente usada como transitionabreviação, é usada para definir um período de tempo para atrasar o início de uma transição.

.delay-me ( transition-delay: 0.25s; )

O valor pode ser um dos seguintes:

Um valor de tempo válido definido em segundos ou milissegundos, por exemplo 1.3sou125ms
Uma lista separada por vírgulas de valores de tempo, para definir valores de atraso separados em várias transições para um único elemento, por exemplo 1s background-color, 350ms transform

O valor padrão para transition-delayé 0s, o que significa que nenhum atraso ocorrerá e a transição começará a ocorrer imediatamente. O valor do tempo pode ser expresso como um número decimal para um tempo mais preciso.

Quando uma transição tem um valor de atraso negativo, isso fará com que a transição comece imediatamente (sem atraso), no entanto, a transição começará no meio do processo, como se já tivesse começado.

A caneta a seguir mostra um efeito de foco em uma caixa que usa um transition-delayvalor de 2scom uma duração de transição de 1s:

Veja a
demonstração do atraso da transição da caneta por CSS-Tricks (@ css-tricks)
no CodePen.

Agora compare isso com a seguinte demonstração, que tem um atraso de -1se uma duração de 3s:

Veja a
demonstração do atraso da transição negativa da caneta por CSS-Tricks (@ css-tricks)
no CodePen.

Observe que, no segundo exemplo, apenas os dois terços finais da transição real são visíveis e não há atraso. O valor negativo remove o atraso e efetivamente reduz a duração.

Para compatibilidade em todos os navegadores compatíveis, os prefixos do fornecedor são necessários, com a sintaxe padrão declarada por último:

.example ( -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )

O IE10 (a primeira versão estável do IE com suporte transition-delay) não requer o -ms-prefixo.

Um caso de uso comum são transições graduais:

Veja as Pen
Staggered Animations de Chris Coyier (@chriscoyier)
no CodePen.

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.