CSS: Animação CSS

Última atualização: 2026-10-13

Propriedades nesta seção: animation-duration animation-timing-function transform opacity width height margin padding box-shadow transition animation

1. @keyframes

Define a sequência de animação especificando estilos em vários pontos:

▶ Exemplo

▶ Experimente

2. Propriedades de animation

(1) Referência Rápida

Propriedade	Valores	Finalidade
`animation-name`	`@keyframes name`	Nome da animação
`animation-duration`	`1s`, `500ms`	Quanto tempo a animação leva
`animation-timing-function`	`ease`, `linear`, `ease-in`, `ease-out`	Curva de velocidade
`animation-delay`	`0.5s`, `-1s`	Atraso antes de começar
`animation-iteration-count`	`1`, `2`, `infinite`	Número de reproduções
`animation-direction`	`normal`, `reverse`, `alternate`	Direção de reprodução
`animation-fill-mode`	`none`, `forwards`, `backwards`, `both`	Estilo antes/depois

(2) Abreviação

CSS

.animation {
  animation: slideIn 0.5s ease-out 0.2s infinite alternate forwards;
  /* name duration timing-function delay iteration-count direction fill-mode */
}

3. Animações Comuns

(1) Fade In

▶ Exemplo

▶ Experimente

(2) Bounce

▶ Exemplo

▶ Experimente

(3) Spinner de Carregamento

▶ Exemplo

▶ Experimente

4. Dicas de Desempenho

⚠️ Aviso de desempenho: Não anime muitos elementos de uma vez. Animar 20-30 elementos simultaneamente causa travamentos. Use will-change para dizer aos navegadores quais elementos animarão, mas não abuse — elementos com will-change consomem memória GPU extra.

Melhores propriedades para animar:

transform (translate, scale, rotate)
opacity

Evite animar:

width, height, margin, padding (causa reflow)
box-shadow (caro para calcular)

Propriedades nesta seção: animation-duration animation-timing-function transform opacity width height margin padding box-shadow transition animation

❓ Perguntas Frequentes

P Qual é a diferença entre @keyframes e transition?

R transition apenas lida com mudanças simples de "estado A para estado B". @keyframes pode definir múltiplos quadros-chave (0%, 50%, 100%) para animações complexas de múltiplas etapas. Efeitos simples de hover usam transition; efeitos complexos de reprodução automática usam @keyframes.

P animation: infinite causará travamento?

R Uso razoável não. Mas não anime muitos elementos de uma vez (recomendado não mais que 20). Use will-change para dizer aos navegadores quais elementos mudarão, ajudando aceleração GPU. Se a página perder quadros, reduza elementos animados ou duração.

P Elemento volta após animação — o que fazer?

R Defina animation-fill-mode: forwards — a animação mantém o estado do último quadro após terminar. O padrão é none, que retorna à posição inicial.

📖 Resumo

Animações @keyframes são mais poderosas que transition — podem definir sequências de animação de múltiplas etapas
Através de sub-propriedades de animation, controle contagem de reprodução, direção, atraso, modo de preenchimento, etc.
Priorize transform e opacity em animações para melhor desempenho
Para loops infinitos (como spinners de carregamento), use infinite

📝 Exercícios

Crie uma animação de "bola saltitante" — bola cai, quica, enfraquece gradualmente (usando keyframes de múltiplas etapas).
Crie um "loader giratório" — um anel girando continuamente (dica: border + border-top-color + border-radius + animation).
Crie uma página de "fade-in deslizante": título desliza do topo, parágrafo de baixo, imagem da esquerda (animações diferentes).
Crie um botão de "luz respirante" — brilho do botão em ciclo.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós