Propriedade animation-direction: Direção da animação (normal, alternate)

Você já sabe como fazer sua animação rodar um certo número de vezes ou infinitamente com animation-iteration-count. Agora, vamos adicionar mais uma camada de controle: a direção em que a animação é reproduzida em cada ciclo. É para isso que serve a propriedade animation-direction.

A animation-direction é como o "botão de reprodução" de um vídeo que pode ir para frente ou para trás. Ela define se a animação deve sempre ir do 0% para 100% (from para to), ou se deve alternar a direção em cada repetição. Isso é muito útil para criar movimentos mais fluidos e naturais, especialmente em animações que se repetem.

Como funciona animation-direction

Esta propriedade aceita as palavras-chave normal, reverse, alternate e alternate-reverse.

Valores possíveis:

1. normal (padrão): A animação é reproduzida para frente em cada ciclo (do 0% para 100%).
2. reverse: A animação é reproduzida para trás em cada ciclo (do 100% para 0%).
3. alternate: A animação alterna a direção em cada ciclo. No primeiro ciclo, ela vai para frente (0% para 100%). No segundo, ela vai para trás (100% para 0%). No terceiro, para frente novamente, e assim por diante.
4. alternate-reverse: Similar a alternate, mas começa indo para trás (100% para 0%) no primeiro ciclo, depois para frente no segundo, e assim por diante.

Sintaxe:

.elemento {
  animation-direction: <valor>;
}

Exemplos:

Vamos usar uma animação simples de movimento da esquerda para a direita:

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

1. normal (padrão):

.box {
  /* ... outras propriedades ... */
  animation-name: mover;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: normal; /* Sempre da esquerda para a direita */
}

Resultado: A caixa se move da esquerda para a direita, "salta" de volta para a esquerda e repete o movimento.

2. reverse:

.box {
  /* ... outras propriedades ... */
  animation-name: mover;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: reverse; /* Sempre da direita para a esquerda */
}

Resultado: A caixa se move da direita para a esquerda, "salta" de volta para a direita e repete o movimento.

3. alternate:

.box {
  /* ... outras propriedades ... */
  animation-name: mover;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate; /* Alterna: esquerda->direita, depois direita->esquerda */
}

Resultado: A caixa se move da esquerda para a direita, depois da direita para a esquerda, criando um movimento contínuo e suave sem "saltos".

4. alternate-reverse:

.box {
  /* ... outras propriedades ... */
  animation-name: mover;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse; /* Alterna: direita->esquerda, depois esquerda->direita */
}

Resultado: Similar a alternate, mas começa o movimento da direita para a esquerda.

5. Múltiplas direções para múltiplas animações:

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

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

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

.box {
  /* ... outras propriedades ... */
  animation-name: girar, mover;
  animation-duration: 2s, 3s;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate; /* Girar normal, Mover alternate */
}

Resultado: A animação de giro sempre vai para frente, enquanto a animação de movimento alterna a direção.

Dicas para animation-direction:

• Movimento Contínuo: alternate é excelente para criar movimentos de vai e vem que parecem mais naturais e evitam o "salto" abrupto de volta ao início.
• Feedback Visual: Pode ser usado para indicar um estado (ex: um ícone que balança para um lado e para o outro).
• Combinação: Combine com animation-iteration-count: infinite; para loops perfeitos.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>animation-direction</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 {
      from { transform: translateX(0); background-color: #007bff; }
      to { transform: translateX(150px); background-color: #28a745; }
    }

    .box {
      width: 100px;
      height: 100px;
      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; /* Todas rodarão infinitamente */
      animation-timing-function: ease-in-out;
    }

    /* --- Exemplos de animation-direction --- */

    .box-normal {
      animation-direction: normal;
    }

    .box-reverse {
      animation-direction: reverse;
    }

    .box-alternate {
      animation-direction: alternate;
    }

    .box-alternate-reverse {
      animation-direction: alternate-reverse;
    }

    .box-multiplas-direcoes {
      animation-name: mover, girar; /* Supondo que 'girar' esteja definida */
      animation-duration: 2s, 1.5s;
      animation-iteration-count: infinite, infinite;
      animation-timing-function: ease-in-out, linear;
      animation-direction: alternate, normal; /* Mover alternate, Girar normal */
      background-color: #ffc107; /* Cor base para esta caixa */
    }

    /* Definição de @keyframes para a animação 'girar' */
    @keyframes girar {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="box box-normal">Normal</div>
  <div class="box box-reverse">Reverse</div>
  <div class="box box-alternate">Alternate</div>
  <div class="box box-alternate-reverse">Alternate-Reverse</div>
  <div class="box box-multiplas-direcoes">Múltiplas Direções</div>
</body>
</html>

Resultado:

• Observe como cada caixa se move de forma diferente, controlada pela animation-direction.
• Note a suavidade do alternate em comparação com o "salto" do normal.
• A caixa "Múltiplas Direções" demonstra a combinação de animações com diferentes direções.

Com animation-direction, você controla o "sentido" da sua animação, adicionando mais fluidez e complexidade aos seus movimentos repetitivos.