Regra @keyframes: Definindo os 'quadros' da animação

Crie os diferentes estados pelos quais sua animação passará (ótimo para transform e filter).

Você já sabe que as Animações CSS permitem criar sequências de movimento complexas. Mas como você diz ao navegador o que fazer em cada momento dessa sequência? É aí que entra a regra @keyframes.

A regra @keyframes é como o roteiro da sua animação. Nela, você define os diferentes "quadros" ou "momentos" da animação, especificando quais propriedades CSS o elemento deve ter em cada um desses pontos. O navegador, então, se encarrega de interpolar (criar os passos intermediários) entre esses quadros, gerando o movimento suave.

Pense em @keyframes como um diretor de cinema que define os pontos cruciais de uma cena: "No início, o ator está aqui. No meio da cena, ele se move para lá. No final, ele está em outra posição." O navegador preenche as lacunas entre essas instruções.

Como funciona @keyframes

A regra @keyframes é declarada com um nome que você escolhe para sua animação, seguido por blocos de código que definem os estados do elemento em diferentes pontos percentuais da duração total da animação.

Sintaxe:

@keyframes nomeDaMinhaAnimacao {
  0% {
    /* Propriedades CSS no início da animação */
  }
  50% {
    /* Propriedades CSS no meio da animação */
  }
  100% {
    /* Propriedades CSS no final da animação */
  }
}

Detalhes Importantes:

  1. nomeDaMinhaAnimacao: É um identificador único que você dá à sua animação. Você usará esse nome para aplicar a animação a um elemento HTML com a propriedade animation-name.
  2. Porcentagens (0%, 50%, 100%):
    • Representam o progresso da animação. 0% é o início, 100% é o fim.
    • Você pode definir quantos quadros-chave quiser entre 0% e 100%.
    • É obrigatório definir pelo menos 0% e 100%.
  3. from e to: São palavras-chave equivalentes a 0% e 100%, respectivamente.
    • from { /* ... */ } é o mesmo que 0% { /* ... */ }
    • to { /* ... */ } é o mesmo que 100% { /* ... */ }
  4. Propriedades CSS: Dentro de cada bloco de porcentagem, você lista as propriedades CSS que deseja animar e seus valores naquele ponto da animação.
    • Você pode animar qualquer propriedade CSS que seja animável (números, cores, ângulos, etc.), assim como nas transições.

Exemplo Básico:

Vamos fazer uma caixa que se move da esquerda para a direita e muda de cor.

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

    /* Definição da animação */
    @keyframes moverCor {
      0% {
        transform: translateX(0); /* Posição inicial */
        background-color: #007bff; /* Cor inicial */
      }
      50% {
        transform: translateX(150px); /* Meio do caminho */
        background-color: #28a745; /* Cor no meio */
      }
      100% {
        transform: translateX(0); /* Volta à posição inicial */
        background-color: #007bff; /* Volta à cor inicial */
      }
    }

    .caixa {
      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);

      /* Aplicação da animação */
      animation-name: moverCor;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }
  </style>
</head>
<body>
  <div class="caixa">Animando!</div>
</body>
</html>

O que acontece no exemplo:

  • A regra @keyframes moverCor define:
    • Em 0% (início): A caixa está na posição original (translateX(0)) e azul.
    • Em 50% (meio): A caixa se move 150px para a direita (translateX(150px)) e fica verde.
    • Em 100% (fim): A caixa retorna à posição original e fica azul novamente.
  • O navegador interpola as propriedades transform e background-color entre esses pontos, criando um movimento suave e uma mudança de cor gradual.
  • A animação é aplicada à .caixa para durar 3 segundos, repetir infinitamente e ter uma curva de aceleração ease-in-out.

@keyframes com from e to:

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

.caixa-giratoria {
  /* ... estilos ... */
  animation-name: girar;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

Resultado: A caixa gira 360 graus em 2 segundos, repetidamente e com velocidade constante.

Pontos Chave:

  • Roteiro da Animação: @keyframes é onde você define o que acontece em cada estágio da animação.
  • Nome Único: Cada @keyframes precisa de um nome único para ser referenciado.
  • Porcentagens (0% a 100%): Indicam o progresso da animação.
  • from e to: Atalhos para 0% e 100%.
  • Propriedades Animáveis: Você pode animar qualquer propriedade CSS que seja animável.
  • Interpolação: O navegador preenche os quadros intermediários para criar a animação suave.

Dominar @keyframes é essencial para criar animações CSS poderosas e personalizadas, dando vida e dinamismo aos seus designs.