Animações

No Laboratório Belavista, o ponto de ajuda no formulário de encomenda pulsa para chamar atenção. Animações CSS usam @keyframes e a propriedade animation.

O exemplo está em pacote de exemplos/47-animacoes/. Abra index.html. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

Respeite prefers-reduced-motion: quem pede menos movimento não deve ficar com a tela piscando.

O que você vai aprender

• Definir estados com @keyframes (from/to ou porcentagens).
• Ligar a animação com animation-name, duração e iteração.
• Preferir transform e opacity para desempenho.
• Pausar ou reduzir movimento quando o sistema pede.

Keyframes

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Animações — Belavista</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <form class="encomenda" action="obrigado.html" method="get">
      <label for="nome">Nome fictício</label>
      <input id="nome" name="nome" type="text" autocomplete="off">
      <button type="button" class="ajuda" aria-describedby="dica">
        <span class="pulso" aria-hidden="true"></span>
        Ajuda
      </button>
      <p id="dica">Use só dados inventados neste exercício.</p>
    </form>
  </body>
</html>

@keyframes pulsar {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.35);
    opacity: 0.35;
  }
}
.pulso {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  margin-inline-end: 0.4rem;
  border-radius: 50%;
  background: #c45c26;
  animation: pulsar 1.2s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .pulso {
    animation: none;
  }
}

Mude uma coisa. Troque 1.2s por 0.4s. Preveja pulsação mais rápida. Recarregue. Confira. Depois devolva um ritmo confortável.

Propriedades da animação

• animation-name — o nome do @keyframes.
• animation-duration — quanto tempo dura um ciclo.
• animation-timing-function — ease, linear, cubic-bezier(...).
• animation-iteration-count — número ou infinite.
• animation-direction — normal, alternate, reverse.
• animation-fill-mode — o que fica antes/depois (forwards, etc.).

Atalho: animation: pulsar 1.2s ease-in-out infinite alternate;

O que animar

Anime transform e opacity. Evitar animar width, top ou box-shadow em excesso: o navegador trabalha mais. Keyframes com vários stops (0%, 50%, 100%) contam histórias mais longas.

Erro comum: nome do @keyframes diferente do animation-name. Nada se move e não há erro gritante na tela.

Arquivo no disco. Teste em 127.0.0.1. Formulário só demonstrativo.

Atividades

1. Qual a diferença entre animation e transition?
2. Por que incluir o bloco prefers-reduced-motion?
3. O que infinite alternate faz no ponto de ajuda?

Respostas comentadas

1. Transition reage à mudança de estado (hover, foco); animation segue um roteiro de keyframes, podendo repetir sozinha.
2. Para respeitar quem prefere menos movimento no sistema operacional.
3. Repete sem parar e inverte a direção a cada ciclo (vai e volta).