Animações de @keyframes CSS com React

Uma regra @keyframes descreve uma animação em várias etapas, nomeando valores de propriedades em pontos ao longo de uma linha do tempo, usando from/to ou porcentagens como 0%, 50%, 100%.

Ao contrário das transições, os quadros-chave podem descrever movimentos complexos em várias etapas, executados por conta própria sem uma mudança de estado a cada etapa.

Você aplica um conjunto de quadros-chave com a propriedade animation: animation: slideIn 400ms ease forwards. Ela reúne o nome, a duração, a função de temporização e o modo de preenchimento.

O modo de preenchimento forwards mantém o elemento nos valores do quadro-chave final depois que a animação termina, impedindo que ele volte bruscamente ao início.

No React, normalmente você adiciona uma classe que contém a declaração de animation quando o estado se torna verdadeiro. Por exemplo, adicionar is-entering inicia os quadros-chave no momento em que o elemento é montado ou um sinalizador muda.

Isso mantém a lógica da animação no CSS, enquanto o React apenas decide quando anexar a classe.

animation-fill-mode controla quais estilos são aplicados antes e depois da execução da animação. forwards mantém o último quadro-chave, backwards aplica o primeiro quadro-chave durante qualquer atraso, e both faz as duas coisas.

Sem forwards, um elemento que anima até um estado gradualmente visível voltaria a ficar invisível quando a animação terminasse.

animation-direction: alternate executa a animação para a frente e depois para trás em cada repetição. Combinada com animation-iteration-count: infinite, ela cria um movimento suave de ida e volta, semelhante a um efeito pulsante ou de respiração.

Isso é útil para indicadores de carregamento ou movimentos sutis que chamam a atenção.

animation-play-state pode ser running ou paused. Você pode controlá-la a partir do estado do React, por exemplo, pausando um letreiro ao passar o cursor ao alternar uma classe.

Como ela pausa em vez de reiniciar, a animação continua exatamente de onde parou.

Uma animação de quadros-chave é reproduzida apenas uma vez quando sua classe é aplicada pela primeira vez; reaplicar a mesma classe não a reinicia. A técnica mais simples no React é alterar o key do elemento para que o React monte novamente um nó novo, reproduzindo a animação desde o início.

Por exemplo, key={count} em uma notificação faz com que ela seja montada novamente toda vez que o contador é incrementado.

Alguns usuários ativam o movimento reduzido no sistema operacional por conforto ou acessibilidade. Envolva as animações não essenciais em @media (prefers-reduced-motion: reduce) e desative-as ou reduza sua duração nesse caso.

Respeitar essa preferência torna sua interface mais inclusiva e evita causar desconforto.

Para animar elementos quando eles entram na janela de visualização, use um IntersectionObserver em um useEffect. Quando a entrada se torna visível, você atualiza o estado, o que adiciona a classe de animação.

Isso produz efeitos de revelação durante a rolagem sem precisar executar manipuladores pesados a cada quadro.

animation-delay determina com que atraso cada animação de quadros-chave começa. Atribuir atrasos crescentes a uma lista de itens faz com que eles sejam animados em sequência, criando uma revelação coreografada.

Você pode calcular o atraso de cada item no React com style={{ animationDelay: i * 80 + 'ms' }}.

Use transições para alterações simples entre dois estados, acionadas por uma interação, e quadros-chave quando precisar de movimento em várias etapas, repetição contínua ou uma animação que seja executada independentemente de uma alternância de estado.

Ambos são CSS puro, portanto o React apenas decide quando as classes são anexadas, enquanto o navegador processa os quadros.

Teste sua compreensão sobre o comportamento dos quadros-chave.

Você aprendeu a definir @keyframes, aplicá-los com a abreviação animation, controlar o modo de preenchimento e a direção, pausar e reativar animações e revelar elementos durante a rolagem com IntersectionObserver.

Você também viu como respeitar prefers-reduced-motion para oferecer movimento acessível.