Animações CSS sem travar a página: guia de performance

Uma animação bonita que trava a rolagem da página é pior do que nenhuma animação. Entender o que o navegador precisa recalcular a cada frame é o primeiro passo para animar com responsabilidade.

As propriedades "baratas": transform e opacity

Animar transform e opacity normalmente não exige que o navegador recalcule layout nem repintura de outros elementos — na maioria dos casos, o trabalho acontece direto na composição de camadas, aproveitando a GPU.

.card {
  transition: transform .25s ease, opacity .25s ease;
}
.card:hover {
  transform: translateY(-6px);
}

As propriedades "caras": width, height, top, left

Animar propriedades que afetam o fluxo do documento (como width ou margin) força o navegador a recalcular o layout de tudo ao redor a cada frame. Prefira o equivalente em transform: scale() ou translate() sempre que possível.

will-change: use com moderação

.elemento-vai-animar {
  will-change: transform;
}

will-change avisa o navegador para preparar uma camada de composição antecipadamente. É útil em elementos que vão animar com certeza, mas usá-lo em excesso consome memória — remova a propriedade quando a animação terminar, se possível via JavaScript.

Prefira @keyframes a JavaScript para loops simples

Spinners, pulsos e loaders não precisam de nenhuma linha de JavaScript — @keyframes lida com o loop de forma muito mais eficiente, como mostramos no nosso gerador de Loaders.

Respeite prefers-reduced-motion

Nem toda pessoa quer ver elementos se movendo na tela. Envolva animações não essenciais em @media (prefers-reduced-motion: no-preference) e ofereça uma versão estática como padrão.

Resumo prático

Anime transform/opacity sempre que possível, evite propriedades de layout, use will-change pontualmente e teste em um dispositivo mais fraco antes de considerar a animação "pronta".