Animações no CSS

Tempo de leitura: 3 minutos

Animações no CSS: Se as Transições CSS são para o movimento reativo simples (de estado A para estado B), as Animações CSS são para o movimento automático, complexo e repetitivo. Elas permitem definir um roteiro detalhado de estilos que um elemento deve seguir ao longo do tempo.

A ferramenta essencial para isso é a regra @keyframes, que dá ao desenvolvedor controle total sobre a sequência e a temporização de múltiplos estágios de uma animação.

1. O Roteiro da Animação: `@keyframes`

A regra @keyframes é o coração das animações CSS. Ela define o que deve acontecer em pontos específicos da duração da animação.

A. Definindo Estágios

Você define o nome da animação e, em seguida, lista os estilos que o elemento deve ter em porcentagens de tempo (de 0% a 100%) ou usando as palavras-chave from e to.

CSS

@keyframes pulsar {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2); /* Cresce no meio do ciclo */
    opacity: 1;
  }
  100% {
    transform: scale(1); /* Volta ao estado inicial */
    opacity: 0.8;
  }
}

2. Controle e Aplicação da Animação

Uma vez que o @keyframes é definido, você o aplica a um elemento usando as propriedades animation-*:

Propriedade	Função	Exemplo
`animation-name`	Nome do `@keyframes` (ex: `pulsar`).	`nome-animacao`
`animation-duration`	Tempo que um ciclo completo leva.	`2s`
`animation-iteration-count`	Quantas vezes a animação se repete.	`infinite` ou `3`
`animation-timing-function`	Curva de velocidade para todo o ciclo.	`linear`
`animation-direction`	Define a direção (Ex: `alternate` para ir e voltar).	`alternate`
`animation-fill-mode`	O que o elemento faz após a animação. `forwards` mantém o estilo do 100%.	`forwards`
`animation-play-state`	Controla se a animação está `running` ou `paused`.	`paused`

🔑 Shorthand e Exemplo de Uso

A forma mais comum é usar a shorthand animation:

CSS

.alerta {
  /* [nome] [duração] [curva] [contagem] [direção] [modo] */
  animation: pulsar 2s ease-in-out infinite alternate forwards;
}

3. Animações vs. Transições: Quando Usar Qual?

Característica	Transições (transition)	Animações (@keyframes)
Gatilho	Requer um evento de estado (ex: `:hover`, classe JS).	Automático ou ativado por carregamento/JS.
Complexidade	Simples, de Ponto A a Ponto B.	Múltiplos estágios (Keyframes).
Repetição	Não repetem automaticamente.	Repetem automaticamente (`infinite`).
Controle	Menos controle, apenas início e fim.	Controle granular de cada ponto no tempo (0% a 100%).

Regra Prática: Use Transições para interações de mouse em botões; use Animações para loaders, banners ou efeitos de entrada de elementos.

4. Performance e Boas Práticas

Assim como nas Transições, priorize transform e opacity dentro dos seus @keyframes para garantir que as animações sejam processadas pela GPU e rodem a 60 FPS. Evite animar propriedades de layout (margin, width) que causam reflow.

CSS

/* Otimizado: Animação suave e de alto desempenho */
@keyframes entrada {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

✅ Conclusão Animações no CSS

As Animações CSS oferecem uma maneira poderosa de adicionar movimento complexo e controlado aos seus projetos. Dominando os @keyframes, você pode criar sequências de movimento ricas e envolventes. Ao usá-las em conjunto com as Transições e priorizando as propriedades de alto desempenho (transform e opacity), você constrói interfaces que são dinâmicas e fluidas.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: