Animações & Transições

Por que o movimento é importante

Movimento é comunicação. Um botão que suaviza ao ser pressionado, um painel que desliza para a tela e uma lista que se reordena suavemente — tudo isso informa ao usuário o que acabou de acontecer. Quando bem feito, o movimento torna a interface responsiva e polida. Quando mal feito, ele distrai e frustra.

O CSS oferece três ferramentas: transitions para mudanças de estado, keyframes para sequências e transforms para movimentação. Domine esses conceitos e você raramente precisará de JavaScript para animações do dia a dia.

Transitions

Uma transition interpola suavemente entre dois estados e é executada quando uma propriedade é alterada.

/* button.css */
.button {
  background: #2563eb;
  transform: translateZ(0);
  transition: background-color 150ms ease, transform 150ms ease;
}

.button:hover {
  background: #3b82f6;
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

A sintaxe curta (shorthand) recebe a propriedade, a duração, a função de temporização (timing function) e um atraso opcional. Transitions precisam de um gatilho: :hover, :focus, :checked, a alteração de uma classe via JavaScript ou uma media query. Mantenha as durações curtas — entre 150 e 300 milissegundos geralmente são suficientes para fornecer feedback.

Transforms

Transforms alteram a aparência de um elemento sem afetar o layout dos demais, e é por isso que são leves para animar.

/* transform.css */
.move { transform: translateX(24px); }
.grow { transform: scale(1.1); }
.turn { transform: rotate(45deg); }
.skew { transform: skewX(-10deg); }

.combo {
  transform: translateY(-4px) scale(1.02) rotate(-1deg);
}

translate, scale e rotate podem ser executados no compositor, mantendo-se fluidos mesmo sob carga. Já animar width, height, top ou margin força o navegador a recalcular o layout em cada frame.

Keyframes

Para animações com múltiplas etapas ou em loop, use @keyframes e animation.

/* spinner.css */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 800ms linear infinite;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.enter {
  animation: fade-up 300ms ease-out both;
}

O atalho animation define nome, duração, timing, delay, contagem de iterações, direção e fill mode. both é útil para animações de entrada, pois aplica os estados do primeiro e do último keyframe.

Funções de temporização (Timing functions)

A função de temporização controla a sensação do movimento. O easing é o que faz com que a animação pareça natural em vez de mecânica.

/* easing.css */
.linear { transition-timing-function: linear; }
.ease-out { transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.bounce { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }

• ease-out para elementos que entram na tela, para que eles desacelerem.
• ease-in para elementos que estão saindo.
• ease-in-out para movimentos entre dois estados visíveis.
• steps() para efeitos de quadros (frames), como digitação ou animações de sprite.

Performance

A regra é simples: anime transform e opacity. Essas propriedades podem ser processadas pelo compositor, pulando as etapas de layout e paint. Qualquer coisa que altere a geometria dispara o layout, e qualquer coisa que altere a cor ou sombra dispara o paint.

/* hint.css */
.animated {
  will-change: transform;
}

will-change indica que um elemento está prestes a ser animado, permitindo que o navegador o promova para sua própria camada. Use com moderação e remova assim que a animação terminar; camadas promovidas em excesso desperdiçam memória. Veja o guia de Browsers & Rendering para entender o porquê.

Acessibilidade e redução de movimento

Alguns usuários sentem tontura ou náuseas devido a animações de movimento, e o sistema operacional disponibiliza essa preferência.

/* reduced.css */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Uma regra geral como esta é uma base segura. Para uma abordagem mais refinada, substitua movimentos amplos por um simples efeito de fade. Nunca transmita significados apenas através de movimento.

View transitions

A View Transitions API anima a transição entre dois estados do DOM ou páginas de forma nativa.

// navigate.js
document.startViewTransition(() => {
  updateTheDOM();
});

O navegador tira snapshots dos estados antigo e novo e anima a transição entre eles, permitindo que você controle o efeito com pseudo-elementos CSS. É ideal para navegação entre páginas e reordenação de listas. Forneça um fallback simples para navegadores que não oferecem suporte a essa funcionalidade.

Padrões

• Feedback de hover e focus. Transições curtas de cor e transform.
• Animações de entrada. Fade e slide in com o fill mode both.
• Listas escalonadas (staggered). Atraso leve em cada item, geralmente configurado com uma variável CSS e estilo inline.
• Skeletons e spinners. Keyframes em loop para sinalizar o carregamento.
• Accordions e drawers. Transição de altura via grid-template-rows de 0fr para 1fr, o que permite uma animação fluida.

Melhores práticas

• Anime transform e opacity; evite propriedades de layout.
• Mantenha as durações curtas: 150–300ms para feedback, e durações maiores para ênfase.
• Use ease-out para entradas e ease-in para saídas.
• Respeite a preferência prefers-reduced-motion.
• Use will-change com moderação e faça a limpeza após a animação.
• Prefira CSS para casos simples e JavaScript para sequências complexas.
• Teste em dispositivos de baixo desempenho, não apenas em um desktop rápido.

Erros comuns

• Animar width, height ou top, causando jank.
• Deixar o will-change ativado permanentemente e desperdiçar memória.
• Animações longas e lentas que deixam a UI com a sensação de lentidão.
• Ignorar as preferências de redução de movimento (reduced-motion).
• Movimentos infinitos que distraem o usuário do conteúdo.
• Depender de animações para transmitir informações essenciais.

Próximos passos

O motion em CSS cobre a maior parte do que as interfaces precisam. Quando você quiser timelines, storytelling baseado em scroll ou controle preciso, siga para o guia de Advanced Animation. Entenda os custos com Browsers & Rendering, mantenha a velocidade com Web Performance e comece pelos fundamentos de CSS.