Animações de interface para copiar

Movimento na interface tem função. Ele diz de onde um elemento veio, avisa que algo mudou, confirma que o clique foi registrado. Quando não faz nenhuma dessas coisas, ele só atrasa a pessoa que queria ler o conteúdo.

Antes de copiar qualquer peça daqui, responda: o que essa animação está comunicando? Se a resposta for "fica bonito", provavelmente ela não deveria existir naquele lugar. Vale especialmente para animação de entrada em página com muito texto — quem chegou para ler não quer esperar o parágrafo aparecer.

O sinal de que passou do ponto é fácil de reconhecer: você já viu a animação cinquenta vezes durante o desenvolvimento e ela começou a incomodar. Se incomoda quem construiu, incomoda quem usa todo dia.

Esta é a parte técnica que muda mais o resultado, e quase nenhum tutorial explica.

Para desenhar um quadro, o navegador passa por três etapas: calcular onde cada elemento fica (layout), pintar os pixels (paint) e juntar as camadas na tela (composite). Animar uma propriedade obriga a refazer a partir da etapa que ela afeta — sessenta vezes por segundo.

• Barato: transform e opacity. Só a última etapa. O navegador resolve sem recalcular nada, muitas vezes fora da linha principal.
• Médio: background-color, box-shadow, filter. Exigem repintura da região.
• Caro: width, height, top, left, margin, padding. Refazem o layout — e mexer num elemento pode obrigar a recalcular os vizinhos.

Por isso, dentro do acervo, quase toda peça se move com transform: translate() em vez de left, e cresce com scale() em vez de width. O efeito visual é o mesmo; o custo não.

Isso não significa que animar altura seja proibido — a peça "Abrir espaço" faz exatamente isso, porque um painel que expande precisa empurrar o conteúdo de baixo. A diferença é fazer por necessidade, uma vez na tela, e não por hábito em quarenta cards de uma lista.

Duração. Quase sempre menor do que a intuição sugere. Entre 150 e 300 ms para transição de estado; até 500 ms para algo que entra em cena. Acima disso a pessoa espera a animação em vez de usar a interface — e num painel de trabalho, esperar meio segundo a cada clique vira irritação acumulada.

Um detalhe fácil de esquecer: a duração deve ser a mesma em todo o produto para o mesmo tipo de movimento. Velocidade inconsistente é percebida mesmo por quem não sabe nomear o problema.

Curva. Movimento linear parece mecânico, porque nada no mundo físico começa e para instantaneamente. A regra prática:

• Saindo (algo desaparece): comece rápido. A pessoa já decidiu, não precisa acompanhar.
• Entrando (algo aparece): termine devagar. Dá tempo de o olho encontrar o elemento.
• Rotação contínua (um spinner): linear é o certo — não há começo nem fim para acentuar.

Curvas que passam do valor final e voltam dão sensação de peso físico. Funcionam bem em elemento pequeno que aparece, como um selo ou um ícone. Em bloco grande, parecem instáveis.

Existe gente que sente desconforto físico real com movimento na tela — náusea, tontura, dor de cabeça. Não é preferência estética: é condição médica, e o sistema operacional já expõe essa configuração.

Respeitar custa uma media query, e todas as peças deste acervo já vêm com ela:

• Desligue o que é decorativo — brilho, pulso, entrada.
• Reduza, em vez de remover, o que comunica estado. Um spinner precisa continuar girando, só mais devagar; sem ele, a pessoa não sabe que o sistema está trabalhando.

O outro ponto: indicador de carregamento precisa de role="status" e um rótulo. Sem isso, quem usa leitor de tela não recebe aviso nenhum — a tela simplesmente fica em silêncio enquanto a página trabalha. É a falha de acessibilidade mais comum em animação, e a mais fácil de corrigir.

A maior parte do acervo é CSS puro — e isso é uma escolha, não uma limitação. Código sem dependência você cola em qualquer projeto e funciona.

Biblioteca ganha o lugar dela quando resolve algo que folha de estilo não faz:

• Cascata calculada. Em CSS, o atraso de cada item de uma lista é escrito à mão — e quebra quando a lista muda de tamanho. Com stagger, o atraso é calculado.
• Interpolar texto. CSS anima propriedade, não conteúdo. Um número que conta de zero até o total precisa de JavaScript de qualquer jeito.
• Encadear etapas. Sequências com dependência entre passos são difíceis de manter em @keyframes.
• Controlar progresso. Pausar, inverter, reagir a rolagem ou a arrastar.

Fora desses casos, o CSS ganha em peso e em portabilidade. Fade, escala, rotação e mudança de estado não precisam de biblioteca — e trazer uma para resolver um transition de três linhas é adicionar dependência sem receber nada em troca.