Microinterações e animação com propósito: quando mover ajuda e quando atrapalha

Movimento chama atenção. Isso é uma vantagem quando você quer conduzir o olhar e um risco quando o movimento não tem motivo.

Para que serve o movimento

Toda animação deve cumprir uma função clara:

• Feedback: confirmar que um clique foi registrado.
• Orientação: mostrar de onde veio e para onde vai um elemento.
• Hierarquia: revelar o conteúdo em ordem de importância.
• Personalidade: reforçar a identidade da marca, com moderação.

Se uma animação não cumpre nenhuma dessas funções, é decoração, e decoração demais cansa.

Animações de entrada ao rolar

Revelar blocos conforme o visitante rola a página cria ritmo, desde que seja sutil. Prefira deslocamentos curtos e duração entre 400 e 700 milissegundos, com curva suave de desaceleração. Não esconda conteúdo importante atrás de animações lentas.

Hover e foco

Estados de passar o mouse e de foco por teclado precisam existir e ser visíveis. Eles mostram o que é clicável e orientam quem navega sem mouse. Mudanças de cor, sombra e leve elevação funcionam bem.

Desempenho

Para manter fluidez em 60 quadros por segundo:

1. anime somente transform e opacity;
2. evite animar propriedades que alteram o layout;
3. use will-change com parcimônia;
4. pause animações fora da tela, como um fundo em canvas;
5. teste em celulares modestos, não só no seu computador.

Acessibilidade

Respeite a preferência por movimento reduzido. Em CSS:

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

Nunca use piscadas rápidas, que podem causar problemas a pessoas sensíveis, e ofereça formas de pausar movimentos que duram mais de cinco segundos.

Quando não animar

Em formulários, tabelas e conteúdo de leitura, o movimento tende a atrapalhar. Deixe o conteúdo estático e reserve o brilho para os momentos que merecem destaque, como o topo da página e as chamadas para ação.

Conclusão

A melhor animação é a que o visitante sente, mas não percebe. Se ele comenta o efeito em vez de comentar a oferta, é sinal de que passou do ponto.