Propriedade transition-delay: Quando a transição começa?

Você já definiu quais propriedades transicionar (transition-property), por quanto tempo (transition-duration) e como a velocidade muda (transition-timing-function). Agora, vamos adicionar um elemento de tempo: quando a transição deve começar. É para isso que serve a propriedade transition-delay.

A transition-delay é como um "temporizador" que você define antes que a transição comece a rodar. Em vez de iniciar imediatamente após a mudança de estado, a transição esperará pelo tempo especificado antes de começar a animar. Isso é útil para criar efeitos sequenciais, atrasar animações ou dar um respiro antes que algo aconteça.

Como funciona transition-delay

Esta propriedade aceita um valor de tempo, que pode ser em segundos (s) ou milissegundos (ms).

Valores possíveis:

• 0s ou 0ms (padrão): A transição começa imediatamente após a mudança de estado.
• <tempo>: Um valor numérico seguido da unidade de tempo (s para segundos ou ms para milissegundos).

Sintaxe:

.elemento {
  transition-delay: <tempo>;
}

Exemplos:

1. Atraso de 1 segundo:

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-delay: 1s; /* A transição da cor de fundo começará 1 segundo após o hover */
}

.box:hover {
  background-color: red;
}

Resultado: Ao passar o mouse, a caixa espera 1 segundo e só então a cor de fundo começa a mudar suavemente de azul para vermelho em 0.5 segundos.

2. Atraso de 500 milissegundos:

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-delay: 500ms; /* A transição da cor de fundo começará 500ms após o hover */
}

.box:hover {
  background-color: red;
}

Resultado: Similar ao exemplo anterior, mas com um atraso de 500 milissegundos.

3. Múltiplos atrasos para múltiplas propriedades:

Assim como transition-duration e transition-timing-function, você pode fornecer um atraso para cada propriedade listada em transition-property, separadas por vírgula. A ordem deve corresponder.

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  transform: translateX(0);
  transition-property: background-color, width, transform;
  transition-duration: 0.5s, 1s, 0.8s;
  transition-timing-function: ease, linear, ease-in-out;
  transition-delay: 0s, 0.5s, 1s; /* BG sem atraso, width com 0.5s, transform com 1s */
}

.box:hover {
  background-color: red;
  width: 150px;
  transform: translateX(50px);
}

Resultado:

• background-color começa imediatamente.
• width espera 0.5 segundos e depois começa.
• transform espera 1 segundo e depois começa.

Dicas para transition-delay:

• Efeitos Sequenciais: Use transition-delay para criar animações onde os elementos aparecem ou se movem em sequência.
• Feedback: Um pequeno atraso pode ser útil para dar ao usuário um momento para processar a interação antes que a animação comece.
• Cuidado com o Excesso: Atrasos muito longos podem frustrar o usuário, fazendo a interface parecer lenta ou não responsiva. Use com moderação.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>transition-delay</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f0f2f5;
      margin: 0;
    }

    .box {
      width: 120px;
      height: 120px;
      background-color: #007bff;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      font-size: 1.1em;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      transition-property: background-color, transform;
      transition-duration: 0.5s; /* Todas as transições durarão 0.5 segundos */
      transition-timing-function: ease-in-out; /* Todas usarão ease-in-out */
    }

    /* --- Exemplos de transition-delay --- */

    .box-no-delay {
      transition-delay: 0s; /* Sem atraso */
    }
    .box-no-delay:hover {
      background-color: #28a745;
      transform: translateX(50px);
    }

    .box-short-delay {
      transition-delay: 0.3s; /* Atraso curto */
    }
    .box-short-delay:hover {
      background-color: #dc3545;
      transform: translateX(50px);
    }

    .box-medium-delay {
      transition-delay: 0.8s; /* Atraso médio */
    }
    .box-medium-delay:hover {
      background-color: #ffc107;
      transform: translateX(50px);
    }

    .box-mixed-delay {
      transition-delay: 0s, 0.5s; /* BG sem atraso, Transform com 0.5s de atraso */
    }
    .box-mixed-delay:hover {
      background-color: #6c757d;
      transform: translateX(50px);
    }
  </style>
</head>
<body>
  <div class="box box-no-delay">Sem Atraso</div>
  <div class="box box-short-delay">Atraso 0.3s</div>
  <div class="box box-medium-delay">Atraso 0.8s</div>
  <div class="box box-mixed-delay">Atraso Misto</div>
</body>
</html>

Resultado:

• Passe o mouse sobre cada caixa para observar como o transition-delay afeta o momento em que a transição começa.
• Note a sequência de início das animações na caixa "Atraso Misto".

Pontos Chave:

• Início da Transição: Define o tempo de espera antes que a transição comece a animar.
• Unidades: Use s (segundos) ou ms (milissegundos).
• Padrão: 0s (começa imediatamente).
• Múltiplas Propriedades: Pode-se definir atrasos diferentes para cada propriedade listada em transition-property.

Com transition-delay, você controla o "quando" sua transição começa, permitindo criar sequências e ritmos mais complexos em suas animações.