Propriedade CSS transition-delay - Uso, Sintaxe e Exemplos

A propriedade CSS transition-delay define quanto tempo aguardar antes de um efeito de transição começar após a mudança que o aciona. É uma das quatro propriedades longas que compõem a abreviação transition, juntamente com transition-property, transition-duration e transition-timing-function.

Esta página aborda os valores da propriedade, como atrasos positivos e negativos se comportam, como definir um atraso separado para cada propriedade animada e os usos mais comuns em interfaces reais. É uma das propriedades do CSS3.

Como o atraso funciona

O valor padrão é 0s, o que significa que o efeito de transição começa imediatamente quando o valor da propriedade muda (por exemplo, em :hover).

Um atraso positivo adia o início. Com transition-delay: 2s, nada visível acontece por dois segundos; somente então a propriedade começa a animar do seu valor antigo para o novo ao longo da transition-duration.

Um atraso negativo é permitido e se comporta de forma diferente: a transição começa imediatamente, mas inicia no meio da sua linha do tempo, como se já estivesse em execução por esse período. Portanto, transition-duration: 4s com transition-delay: -2s pula diretamente para o ponto intermediário e termina nos dois segundos restantes.

O atraso não se repete — ao contrário de uma iteração de animação, uma transição é executada uma vez por mudança, portanto o atraso se aplica apenas à execução única que a mudança aciona.

Informação

Os navegadores modernos suportam esta propriedade nativamente sem prefixos de fornecedor.

Valor Inicial	0s
Aplica-se a	Todos os elementos, pseudo-elementos ::before e ::after.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.transitionDelay = "3s";

Sintaxe

transition-delay: time | initial | inherit;

Exemplo básico

Esta caixa cresce quando você passa o cursor sobre ela. O atraso é 0s, então o crescimento começa imediatamente — altere para 1s no editor para sentir a diferença.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width;
        transition-duration: 1s;
        transition-delay: 0s;
      }
      div:hover {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo com 2 segundos de atraso

Aqui a caixa aguarda dois segundos inteiros após você passar o cursor antes de começar a crescer. Observe que transition-property lista várias propriedades como uma lista separada por vírgulas (width, height).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width, height;
        transition-duration: 3s;
        transition-delay: 2s;
      }
      div:hover {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element and wait 2 seconds to see the effect.</p>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

Um atraso diferente para cada propriedade

Ao animar várias propriedades, você pode dar a cada uma o seu próprio atraso listando os valores na mesma ordem que em transition-property. A lista de atrasos é combinada com a lista de propriedades: aqui width começa imediatamente, enquanto background-color aguarda um segundo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width, background-color;
        transition-duration: 1s, 1s;
        transition-delay: 0s, 1s;
      }
      div:hover {
        width: 300px;
        background-color: #1c8470;
      }
    </style>
  </head>
  <body>
    <h2>Staggered transition-delay</h2>
    <p>Hover: the width grows first, then the color changes a second later.</p>
    <div></div>
  </body>
</html>

Casos de uso comuns

Escalonar animações para que vários elementos (ou várias propriedades de um elemento) se movam um após o outro em vez de todos ao mesmo tempo, criando uma sensação mais refinada.
Menus com intenção de hover. Um pequeno atraso no colapso de um menu suspenso (frequentemente combinado com um atraso em visibility) mantém o menu aberto brevemente para que um movimento de mouse ligeiramente fora do alvo não o feche.
Atrasos negativos para iniciar um efeito já "em andamento", útil quando você deseja que um elemento chegue a um ponto específico de sua transição imediatamente.

Valores

Valor	Descrição
time	Especifica quantos segundos ou milissegundos um efeito de transição deve aguardar para iniciar. O valor padrão é 0s.
initial	Faz a propriedade usar seu valor padrão.
inherit	Herda a propriedade de seu elemento pai.

Prática

Qual afirmação está correta sobre a propriedade transition-delay?

especifica quando o efeito de transição deve terminar.O valor padrão é 0s, o que significa que o efeito de transição não vai iniciar.Um valor negativo fará o efeito de transição começar imediatamente.