Propriedade animation-name: Chamando sua animação

Você já aprendeu a criar o "roteiro" da sua animação usando a regra @keyframes. Agora, como você faz para que um elemento HTML execute esse roteiro? É para isso que serve a propriedade animation-name.

A propriedade animation-name é como o "nome do ator" que você associa a um "roteiro" (@keyframes). Ela vincula uma animação definida por @keyframes a um elemento HTML específico, fazendo com que esse elemento comece a se animar de acordo com as instruções do @keyframes.

Como funciona animation-name

Esta propriedade aceita o nome (identificador) da regra @keyframes que você deseja aplicar ao elemento.

Valores possíveis:

1. none (padrão): Nenhuma animação é aplicada ao elemento.
2. nome-da-animacao: O nome que você deu à sua regra @keyframes (ex: minhaAnimacao, girarCaixa, pulsarCor).
3. Lista de nomes de animação: Você pode aplicar múltiplas animações a um único elemento, separando os nomes por vírgula.

Sintaxe:

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

Exemplos:

1. Aplicando uma única animação:

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

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

  animation-name: moverDireita; /* Aplica a animação 'moverDireita' */
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Resultado: A caixa se move da esquerda para a direita e volta, repetidamente.

2. Aplicando múltiplas animações:

Você pode aplicar várias animações a um único elemento. Cada animação terá seu próprio conjunto de propriedades (duração, atraso, etc.).

@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 ... */

  /* Aplica duas animações: 'moverDireita' e 'mudarCor' */
  animation-name: moverDireita, mudarCor;
  /* As outras propriedades de animação também devem ser listas, correspondendo à ordem */
  animation-duration: 2s, 3s; /* moverDireita dura 2s, mudarCor dura 3s */
  animation-iteration-count: infinite, infinite;
}

Resultado: A caixa se move da esquerda para a direita (em 2s) enquanto sua cor de fundo muda de azul para verde e volta (em 3s), tudo simultaneamente e repetidamente.

Pontos Chave:

• Vínculo: animation-name é o elo entre a definição @keyframes e o elemento HTML.
• Identificador: O valor deve corresponder exatamente ao nome dado à sua regra @keyframes.
• Múltiplas Animações: Permite aplicar mais de uma animação a um elemento, o que é útil para efeitos combinados.
• Sem animation-name: Se você definir outras propriedades de animação (como animation-duration) mas não animation-name, a animação não será executada.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>animation-name</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ções de @keyframes --- */

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

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

    @keyframes deslizarCor {
      0% { transform: translateX(0); background-color: #007bff; }
      50% { transform: translateX(100px); background-color: #28a745; }
      100% { transform: translateX(0); background-color: #007bff; }
    }

    .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; /* Para melhor visualização */
    }

    /* --- Aplicação das Animações com animation-name --- */

    .box-girar {
      animation-name: girar;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

    .box-pulsar {
      animation-name: pulsar;
      animation-duration: 1.5s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }

    .box-deslizar-cor {
      animation-name: deslizarCor;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }

    .box-multiplas {
      /* Aplicando duas animações: girar e pulsar */
      animation-name: girar, pulsar;
      /* As outras propriedades devem corresponder na ordem */
      animation-duration: 3s, 1.5s; /* girar dura 3s, pulsar dura 1.5s */
      animation-iteration-count: infinite, infinite;
      animation-timing-function: linear, ease-in-out;
      background-color: #ffc107; /* Cor base para a caixa com múltiplas animações */
    }
  </style>
</head>
<body>
  <div class="box box-girar">Girar</div>
  <div class="box box-pulsar">Pulsar</div>
  <div class="box box-deslizar-cor">Deslizar</div>
  <div class="box box-multiplas">Múltiplas</div>
</body>
</html>

Resultado:

• Observe como cada caixa executa a animação associada pelo animation-name.
• A caixa "Múltiplas" demonstra a combinação de duas animações diferentes.

Com animation-name, você dá vida aos seus elementos, conectando o roteiro da animação que você criou com o ator que irá executá-lo.