EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Animação CSS

@keyframes

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

Exemplo

HTML 
<style>
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in {
  animation: slideIn 0.5s ease-out;
}
</style>
<div class="slide-in">Deslizando da esquerda</div>
▶ Experimente

Propriedades de animation

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

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 */
}

Animações Comuns

Fade In

Exemplo

HTML 
<style>
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 1s ease-in;
}
</style>
<div class="fade-in">Animação de fade in</div>
▶ Experimente

Bounce

Exemplo

HTML 
<style>
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.bounce {
  animation: bounce 1s infinite;
}
</style>
<div class="bounce">Elemento saltitante</div>
▶ Experimente

Spinner de Carregamento

Exemplo

HTML 
<style>
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
</style>
<div class="spinner"></div>
▶ Experimente

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:

Evite animar:

❓ Perguntas Frequentes

Q 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.
Q 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.
Q 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

📝 Exercícios

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