Transições CSS — Guia de Referência Completo

Uma transição CSS é uma das ferramentas mais poderosas no arsenal de um desenvolvedor front-end. Quando o valor de uma propriedade CSS muda — porque o usuário passou o mouse sobre um elemento, uma classe foi alternada via JavaScript, ou um campo recebeu o foco — o navegador normalmente aplica essa mudança instantaneamente. Uma transição intercepta essa mudança e anima do valor antigo para o novo ao longo de uma duração definida, produzindo um feedback de interface suave e profissional sem uma única linha de JavaScript de animação.

O modelo mental é direto: você declara em um elemento quais propriedades devem animar, quanto tempo devem levar, qual curva de easing devem seguir e se deve haver um atraso antes de começarem. O navegador cuida de toda a interpolação quadro a quadro automaticamente, usando a GPU para propriedades compostas como transform e opacity.

Como a propriedade transition funciona

A propriedade abreviada transition combina quatro subpropriedades em uma única declaração. Você pode direcionar múltiplas propriedades separando-as por vírgula, e cada valor separado por vírgula pode ter sua própria duração, easing e atraso. Isso é muito melhor do que usar transition: all, que força o navegador a verificar cada propriedade CSS em cada quadro — uma armadilha de desempenho que causa trabalho de repintura desnecessário.

As quatro subpropriedades são transition-property (qual valor CSS animar), transition-duration (quanto tempo), transition-timing-function (a curva de easing) e transition-delay (quanto tempo esperar antes de começar). O atraso é particularmente útil para efeitos escalonados.

A função de temporização é a personalidade

Se a duração determina quanto tempo uma animação leva, a função de temporização determina como ela se sente. Duas animações com duração idêntica mas funções de temporização diferentes se sentem completamente diferentes. ease-out — que começa rápido e desacelera — imita o comportamento físico de um objeto chegando e se assentando, por isso parece natural para elementos entrando na tela. ease-in — que começa devagar e acelera — reflete um objeto ganhando impulso antes de sair. linear parece mecânico, o que é exatamente o que você quer para barras de progresso.

Quais propriedades podem realmente ser animadas?

Nem todas as propriedades CSS suportam interpolação. Uma propriedade deve ter valores entre os quais o navegador possa calcular etapas intermediárias. Valores numéricos, cores, comprimentos e porcentagens são todos interpoláveis. Valores discretos como display e font-family não são.

O desempenho importa tanto quanto o suporte. O pipeline de renderização do navegador tem três estágios: layout, paint e composite. Apenas transform e opacity são tratadas inteiramente pela camada de composição GPU, o que significa que animam na taxa de quadros total sem impacto no layout ou na pintura.

O truque de visibilidade para ocultar elementos

Um dos desafios de transição mais comuns é fazer um elemento desaparecer suavemente. Definir display: none remove-o do documento instantaneamente — você não pode fazer transição para ou a partir dele. A solução é combinar opacity com visibility. A propriedade visibility aceita um atraso de transição.

Escalonamento com transition-delay

O escalonamento — fazer múltiplos elementos animarem sequencialmente em vez de todos de uma vez — cria uma sensação mais dinâmica e viva em uma UI. A técnica é simples: aplique a mesma transição base a um conjunto de elementos, então dê a cada elemento um transition-delay progressivamente maior usando seletores :nth-child.

Atraso negativo — começando no meio da animação

Um valor negativo de transition-delay diz ao navegador para iniciar a transição como se já estivesse rodando por essa duração. Um valor de -300ms significa que a animação começa na marca dos 300ms em vez de em 0.

A técnica FLIP

FLIP (First, Last, Invert, Play) é um padrão para animar mudanças de layout que de outra forma exigiriam transicionar propriedades caras. Você registra a posição do elemento antes da mudança (First), aplica a mudança (Last), calcula a diferença e aplica o inverso como transform (Invert), depois remove o inverso para que o navegador anime para a posição final (Play).

Desempenho e will-change

A propriedade will-change é uma dica ao navegador de que um elemento está prestes a animar, dando-lhe a oportunidade de promover esse elemento para sua própria camada de composição GPU antes que a animação comece. A propriedade deve ser usada com moderação — cada camada promovida consome memória GPU.

Acessibilidade e prefers-reduced-motion

Usuários com distúrbios vestibulares, enxaquecas ou sensibilidade ao movimento podem experimentar desconforto físico genuino com animações na tela. Os sistemas operacionais expõem uma configuração de acessibilidade "Reduzir Movimento", consultável via media query prefers-reduced-motion. O critério de sucesso 2.3.3 do WCAG 2.1 exige que o movimento acionado por interação possa ser desativado.

Transições vs animações CSS

Transições e animações CSS resolvem problemas diferentes. Transições são sempre acionadas por uma mudança de estado e animam entre exatamente dois estados. Elas se invertem automaticamente quando a mudança de estado se inverte. Animações CSS, por outro lado, podem fazer loop, podem definir múltiplos keyframes intermediários e podem rodar automaticamente ao carregar a página.