Propriedade animation-delay: Quando a animação começa?

Aprenda a atrasar o início de uma animação.

Você já definiu o "roteiro" (@keyframes), o "ator" (animation-name), a "duração" (animation-duration) e o "ritmo" (animation-timing-function) da sua animação. Agora, vamos controlar o momento em que ela começa. A propriedade animation-delay define um tempo de espera antes que a animação comece a ser executada.

A animation-delay é como um "temporizador" que você programa para que a animação não comece imediatamente. Em vez de iniciar assim que o elemento é carregado ou quando a animação é aplicada, ela esperará pelo tempo especificado antes de dar o "play". Isso é extremamente útil para criar efeitos sequenciais, introduções animadas ou simplesmente para dar um respiro antes que a ação comece.

Como funciona animation-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 animação começa imediatamente após ser aplicada ao elemento.
  • <tempo>: Um valor numérico seguido da unidade de tempo (s para segundos ou ms para milissegundos).

Sintaxe:

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

Exemplos:

1. Animação com atraso de 1 segundo:

@keyframes girar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* ... outras propriedades ... */

  animation-name: girar;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 1s; /* A animação começará 1 segundo após o carregamento da página/aplicação */
}

Resultado: A caixa esperará 1 segundo e só então começará a girar.

2. Animação com atraso de 500 milissegundos:

@keyframes pulsar {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: green;
  /* ... outras propriedades ... */

  animation-name: pulsar;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-delay: 500ms; /* A animação começará 500ms após o carregamento */
}

Resultado: A caixa esperará 500 milissegundos e só então começará a pulsar.

3. Múltiplos atrasos para múltiplas animações:

Se você aplicou múltiplas animações com animation-name (separadas por vírgula), você pode fornecer um atraso para cada uma delas, também separadas por vírgula. A ordem deve corresponder à ordem dos nomes das animações.

@keyframes moverDireita {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

@keyframes mudarCor {
  0% { background-color: blue; }
  50% { background-color: green; }
  100% { background-color: blue; }
}

.box {
  width: 100px;
  height: 100px;
  /* ... outras propriedades ... */

  animation-name: moverDireita, mudarCor;
  animation-duration: 2s, 3s;
  animation-iteration-count: infinite, infinite;
  animation-delay: 0s, 1s; /* 'moverDireita' começa imediatamente, 'mudarCor' espera 1s */
}

Resultado: A animação de movimento (moverDireita) começa imediatamente, enquanto a animação de mudança de cor (mudarCor) espera 1 segundo antes de começar.

Valores Negativos para animation-delay:

Uma característica interessante de animation-delay é que ele aceita valores negativos.

  • animation-delay: -1s;: Isso faz com que a animação comece imediatamente, mas como se já tivesse decorrido 1 segundo de sua execução. Ou seja, ela começa "no meio" do seu ciclo.
  • Uso: É útil para sincronizar animações que devem parecer que já estão em andamento quando a página carrega, ou para criar variações em um grupo de elementos animados.

Dicas para animation-delay:

  • Efeitos Sequenciais: Perfeito para fazer elementos aparecerem ou se moverem em uma ordem específica.
  • Introduções: Use para atrasar a entrada de elementos na tela.
  • 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>animation-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;
    }

    /* --- Definição da Animação de Movimento --- */
    @keyframes mover {
      0% { transform: translateX(0); }
      50% { transform: translateX(100px); }
      100% { transform: translateX(0); }
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #007bff;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      font-size: 1.1em;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      margin: 10px;
      animation-name: mover; /* Todas usarão a animação de mover */
      animation-duration: 2s; /* Todas durarão 2 segundos */
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }

    /* --- Exemplos de animation-delay --- */

    .box-no-delay {
      animation-delay: 0s; /* Começa imediatamente */
    }

    .box-short-delay {
      animation-delay: 0.5s; /* Espera 0.5s para começar */
    }

    .box-long-delay {
      animation-delay: 1.5s; /* Espera 1.5s para começar */
    }

    .box-negative-delay {
      animation-delay: -1s; /* Começa como se já tivesse 1s de animação */
    }

    .box-multiplas-delays {
      animation-name: mover, mudarCor; /* Supondo que 'mudarCor' esteja definida */
      animation-duration: 2s, 3s;
      animation-iteration-count: infinite, infinite;
      animation-timing-function: ease-in-out, linear;
      animation-delay: 0s, 1s; /* Mover começa imediatamente, MudarCor espera 1s */
      background-color: #28a745; /* Cor base para esta caixa */
    }

    /* Definição de @keyframes para a animação 'mudarCor' */
    @keyframes mudarCor {
      0% { background-color: #28a745; }
      50% { background-color: #dc3545; }
      100% { background-color: #28a745; }
    }
  </style>
</head>
<body>
  <div class="box box-no-delay">Sem Atraso</div>
  <div class="box box-short-delay">Atraso 0.5s</div>
  <div class="box box-long-delay">Atraso 1.5s</div>
  <div class="box box-negative-delay">Atraso -1s</div>
  <div class="box box-multiplas-delays">Múltiplos Atrasos</div>
</body>
</html>

Resultado:

  • Observe como cada caixa começa sua animação em momentos diferentes.
  • A caixa com animation-delay: -1s começa "no meio" do seu movimento.
  • A caixa "Múltiplos Atrasos" demonstra animações começando em tempos diferentes.

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