Performance e prefers-reduced-motion: animar com responsabilidade
Uma animação bonita que engasga a rolagem da página, ou que causa desconforto real em quem tem sensibilidade a movimento, deixou de ser um detalhe de acabamento e virou um problema de produto.
Estudar esta lição interativa →Nem toda propriedade custa o mesmo para o navegador animar. Mudar width, top ou margin a cada quadro obriga o navegador a recalcular a posição e o tamanho de todos os elementos afetados por aquela mudança (um processo chamado reflow, ou recálculo de layout), a cada um dos, tipicamente, 60 quadros por segundo. Já transform e opacity podem ser animados numa camada separada, tratada pela placa de vídeo, sem recalcular o layout da página ao redor: o elemento se move, gira ou fica transparente, mas ninguém mais precisa "se reacomodar".
Pense em duas formas de mover um móvel dentro de uma sala fotografada: uma é empurrar o móvel de verdade, centímetro a centímetro, o que obriga a redesenhar a foto inteira a cada passo (todo o resto da cena precisa ser conferido de novo). A outra é colar uma cópia transparente do móvel numa camada de acetato por cima da foto, e só deslizar essa camada, sem tocar em nada da cena original por baixo. transform é essa segunda camada: move-se sem perturbar o resto do layout por baixo.
Custosas (forçam reflow)
width, height, top, left, margin, paddingMudar qualquer uma dessas obriga o navegador a recalcular o layout de tudo ao redor, a cada quadro da animação.
Intermediárias (forçam repintura)
color, background-color, box-shadow, border-colorNão mexem no tamanho nem na posição de ninguém, então não há reflow, mas o navegador precisa repintar os pixels do elemento a cada quadro. Custam menos que o layout e mais que o compositor.
Leves (só compositor)
transform, opacityPodem ser animadas sem recalcular layout nenhum; costumam rodar de forma bem mais suave, principalmente em celulares mais fracos.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Os dois cartões chegam à mesma posição final, mas o da direita usa transform: translateX() em vez de mudar left, evitando forçar reflow no layout ao redor.
A segunda metade da responsabilidade não é técnica, é humana: algumas pessoas têm sensibilidade real a movimento na tela (enjoo, tontura, ou apenas distração excessiva), e o sistema operacional deixa isso configurável numa preferência de acessibilidade. A media query @media (prefers-reduced-motion: reduce) permite ao CSS ler essa preferência e reduzir (ou remover) animações não essenciais para quem pediu menos movimento, o mesmo tipo de responsabilidade já discutida com o :focus do Módulo 8: um recurso de acessibilidade que só funciona se alguém de fato o implementar.
As células de prática leem a preferência real do seu navegador e do seu sistema (a prévia fica dentro da mesma janela), então o teste funciona aqui. Duas formas: ative a opção de reduzir movimento nas configurações de acessibilidade do sistema (Windows, macOS, Android e iOS têm todos essa opção) ou, sem mexer no sistema, simule no navegador: no Chrome ou no Edge, abra as ferramentas do desenvolvedor, aperte Ctrl+Shift+P, digite "Rendering", abra Show Rendering e escolha prefers-reduced-motion: reduce no campo "Emulate CSS media feature". Depois é só rodar a célula de novo.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione a media query prefers-reduced-motion.