Docs executáveis de CSS: Animação CSS

Q: Como fazer uma animação no CSS?

Defina as etapas com @keyframes name { from { ... } to { ... } } e aplique ao elemento com a propriedade animation e uma duração: animation: name 1s ease-out;. A duração é obrigatória, porque o padrão dela é 0s.

Q: Como fazer uma animação CSS em loop infinito?

Defina animation-iteration-count: infinite ou acrescente infinite ao shorthand: animation: spin 1s linear infinite;. Acrescente alternate para tocar para frente e depois para trás a cada ciclo.

Q: Como pausar uma animação CSS?

Defina animation-play-state: paused no elemento, por exemplo no :hover ou por uma classe acrescentada pelo JavaScript. Voltar para running continua de onde parou.

Q: Como desligar animações para quem prefere movimento reduzido?

Envolva a animação em @media (prefers-reduced-motion: no-preference) { ... } ou remova-a dentro de @media (prefers-reduced-motion: reduce) { ... }. A query segue a configuração de reduzir movimento do sistema operacional do usuário.

Uma animação CSS em um exemplo

Uma animação tem duas partes: o @keyframes, que descreve as etapas, e a propriedade animation, que as aplica a um elemento com uma duração. Este card desliza e aparece aos poucos quando a página carrega:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS animation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide-in {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .card {
      padding: 16px;
      border-radius: 8px;
      background: #2563eb;
      color: white;
      animation: slide-in 0.6s ease-out both;
    }
    /* Keep only the fade for people who asked for less motion */
    @media (prefers-reduced-motion: reduce) {
      @keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
    }
  </style>
</head>
<body>
  <div class="card">Hello! This card animated in.</div>
</body>
</html>

Edite o código (ou mude a duração para 2s) e a prévia recarrega, para você ver o card entrar de novo. O bloco @media (prefers-reduced-motion: reduce) troca os keyframes por um fade simples só para leitores cujo sistema está configurado para reduzir movimento.

Sintaxe do @keyframes

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

from é o mesmo que 0% e to é o mesmo que 100%.
Acrescente quantas etapas em porcentagem precisar. Etapas com os mesmos estilos podem dividir uma linha: 0%, 100% { ... }.
Uma propriedade que falta no primeiro ou no último keyframe é animada a partir do valor do próprio elemento, ou até ele.
O nome (pulse) é o que você passa para animation-name. Ele diferencia maiúsculas de minúsculas e não pode ser uma palavra-chave como none.

As propriedades de animation

Propriedade	O que define	Padrão
`animation-name`	qual `@keyframes` rodar	`none`
`animation-duration`	duração de um ciclo	`0s`
`animation-timing-function`	curva de velocidade entre os keyframes	`ease`
`animation-delay`	espera antes do primeiro ciclo (negativo começa no meio)	`0s`
`animation-iteration-count`	número de ciclos, ou `infinite`	`1`
`animation-direction`	`normal`, `reverse`, `alternate`, `alternate-reverse`	`normal`
`animation-fill-mode`	estilos antes e depois: `none`, `forwards`, `backwards`, `both`	`none`
`animation-play-state`	`running` ou `paused`	`running`

O shorthand as aceita em quase qualquer ordem. A única regra é que o primeiro valor de tempo é a duração e o segundo é o delay:

.loader {
  animation: pulse 1.2s ease-in-out 0.2s infinite alternate both;
  /*         name  duration timing  delay count   direction fill */
}

direction e fill-mode, ao vivo

Escolha uma direção, um fill mode e uma contagem e aperte Play. A caixa percorre 200px até o fim da trilha. O painel diz onde ela ficou depois que a animação terminou:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>direction and fill-mode</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    @keyframes move {
      from { transform: translateX(0); background: #2563eb; }
      to   { transform: translateX(200px); background: #16a34a; }
    }
    .track { width: 240px; background: #f3f4f6; margin: 10px 0; }
    #box { width: 40px; height: 40px; background: #f59e0b; }
    .controls { display: flex; flex-wrap: wrap; gap: 10px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>direction <select id="dir"><option>normal</option><option>reverse</option><option>alternate</option></select></label>
    <label>fill-mode <select id="fill"><option>none</option><option>forwards</option><option>backwards</option><option>both</option></select></label>
    <label>count <select id="count"><option>1</option><option>2</option></select></label>
    <button id="play">Play</button>
  </div>
  <div class="track"><div id="box"></div></div>
  <p id="out">The amber color is the box's own style, used whenever no keyframe applies.</p>
  <script>
    const box = document.getElementById('box');
    const val = (id) => document.getElementById(id).value;
    document.getElementById('play').addEventListener('click', () => {
      box.style.animation = 'none';
      box.offsetWidth; // restart: let the browser see the animation removed
      box.style.animation = 'move 1s ease-in-out ' + val('count') + ' ' + val('dir') + ' ' + val('fill');
    });
    box.addEventListener('animationend', () => {
      const x = new DOMMatrix(getComputedStyle(box).transform).m41;
      document.getElementById('out').textContent = 'Finished at x = ' + Math.round(x) + 'px, color ' + getComputedStyle(box).backgroundColor;
    });
  </script>
</body>
</html>

O que observar:

fill-mode: none (o padrão): depois do último quadro, a caixa volta de uma vez para x = 0 e fica âmbar de novo.
forwards: ela fica no último keyframe. Com normal, isso é x = 200 e verde; com reverse, ela termina em x = 0 e azul, porque o último keyframe tocado foi o from.
alternate com contagem 2 vai e volta, então até com forwards termina em x = 0.

Loops infinitos: um indicador de carregamento

infinite repete para sempre, e um animation-delay em cada filho os desencontra para se moverem em sequência. Mantenha os loops calmos: lentos, pequenos, sem piscar.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Loading dots</title>
  <style>
    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
      40%           { transform: scale(1);   opacity: 1; }
    }
    .dots { display: flex; gap: 8px; padding: 12px; }
    .dots span {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #2563eb;
      animation: bounce 1.4s ease-in-out infinite;
    }
    .dots span:nth-child(2) { animation-delay: 0.2s; }
    .dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes fade {
      0%, 80%, 100% { opacity: 0.4; }
      40%           { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .dots span { animation-name: fade; } /* no size change, only a soft fade */
    }
  </style>
</head>
<body>
  <div class="dots" role="status" aria-label="Loading"><span></span><span></span><span></span></div>
</body>
</html>

role="status" com um aria-label avisa a quem usa leitor de tela que algo está carregando, o que os pontos sozinhos não dizem. Para um círculo girando, veja a página de rotate.

Pausar e controlar animações

animation-play-state: paused congela uma animação onde ela está, e running continua dali. Passe o mouse sobre a barra abaixo para pausá-la:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pause on hover</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide {
      from { transform: translateX(0); }
      to   { transform: translateX(260px); }
    }
    .track { width: 300px; padding: 6px 0; background: #f3f4f6; }
    .bar { width: 40px; height: 24px; border-radius: 4px; background: #16a34a; animation: slide 3s ease-in-out infinite alternate; }
    .track:hover .bar { animation-play-state: paused; }
  </style>
</head>
<body>
  <div class="track"><div class="bar"></div></div>
  <p>Hover the gray track to pause.</p>
</body>
</html>

Pelo JavaScript, element.getAnimations() devolve as animações CSS em andamento, cada uma com pause(), play(), cancel() e um currentTime que você pode ler ou definir. O evento animationend dispara quando uma animação não infinita termina, e animationiteration no fim de cada ciclo.

Respeite o movimento reduzido e nunca pisque

Duas regras de acessibilidade valem para toda animação:

Movimento reduzido. As pessoas podem pedir ao sistema menos movimento porque o movimento lhes faz mal. O padrão mais seguro é só acrescentar movimento quando elas não pediram menos:

@media (prefers-reduced-motion: no-preference) {
  .hero-title { animation: slide-in 0.8s ease-out both; }
}

Nada de piscar. Conteúdo que pisca mais de três vezes em um segundo pode provocar convulsões. Evite de vez piscadas rápidas e de alto contraste.

Mantenha as animações suaves

Anime transform e opacity sempre que puder. O navegador consegue aplicá-las sem montar a página de novo, então elas continuam suaves até em celulares lentos. Animar width, height, top, left ou margin recalcula o layout a cada quadro. Para mover um elemento, use translate(), da página do transform.

Erros comuns

Sem duração. animation: fade; não faz nada, porque a duração padrão é 0s.
Um nome que não bate. O animation-name precisa ser exatamente igual ao nome do @keyframes, incluindo maiúsculas e minúsculas.
Voltar de uma vez no fim. Acrescente forwards (ou both) para manter o último keyframe.
Um piscar antes de uma animação com delay começar. Durante o animation-delay, o elemento mostra os estilos normais. backwards (ou both) aplica o primeiro keyframe durante o delay.
Reiniciar uma animação definindo o mesmo valor. Definir o mesmo animation de novo não faz nada. Remova, force um reflow (el.offsetWidth) e defina de novo, como faz o botão Play acima.
Animar o display. Ele troca de uma vez. Anime opacity e transform.

Perguntas frequentes

Como fazer uma animação no CSS?

Defina as etapas com @keyframes name { from { ... } to { ... } } e aplique ao elemento com a propriedade animation e uma duração: animation: name 1s ease-out;. A duração é obrigatória, porque o padrão dela é 0s.

O que animation-fill-mode: forwards faz?

Mantém os estilos do último keyframe depois que a animação termina. Sem ele, o elemento volta de uma vez aos estilos normais. backwards aplica o primeiro keyframe durante o delay, e both faz os dois.

Como fazer uma animação CSS em loop infinito?

Defina animation-iteration-count: infinite ou acrescente infinite ao shorthand: animation: spin 1s linear infinite;. Acrescente alternate para tocar para frente e depois para trás a cada ciclo.

Qual a diferença entre animation e transition no CSS?

Uma transition anima uma propriedade entre dois valores quando ela muda, normalmente no hover ou na troca de uma classe. Uma animation roda sozinha assim que é aplicada, pode ter qualquer número de keyframes e pode se repetir, inverter e pausar.

Como pausar uma animação CSS?

Defina animation-play-state: paused no elemento, por exemplo no :hover ou por uma classe acrescentada pelo JavaScript. Voltar para running continua de onde parou.

Como desligar animações para quem prefere movimento reduzido?

Envolva a animação em @media (prefers-reduced-motion: no-preference) { ... } ou remova-a dentro de @media (prefers-reduced-motion: reduce) { ... }. A query segue a configuração de reduzir movimento do sistema operacional do usuário.

Conceitos relacionados