Animação no site é demais quando não tem um trabalho a fazer. Toda animação precisa orientar, confirmar, dar hierarquia ou contar uma história; se não cumpre nenhum desses papéis, é ruído que atrasa a leitura e pesa o celular. O critério, as durações recomendadas com fonte e os cinco erros que fazem o visitante fechar a aba estão abaixo.
Quando a animação no site é demais?
A animação é demais quando o visitante percebe o movimento antes de perceber a informação. O teste é simples: tire a animação; se a página continua clara, era decoração.
Nós usamos quatro trabalhos para julgar cada animação. Orientar: mostrar de onde um elemento veio, como o menu que desliza da borda onde estava o botão. Confirmar: dizer que o clique foi registrado. Dar hierarquia: levar o olho primeiro ao que importa. Contar uma história: conduzir a leitura por uma sequência, como no scrollytelling, em que a rolagem vira roteiro.
O Nielsen Norman Group mediu o lado oposto em testes com usuários. Em Animation for Attention and Comprehension, movimento na periferia da visão puxa a atenção sem pedir licença, e animação que se repete a cada interação vira obstáculo: os participantes acharam o efeito bonito na primeira vez e irritante depois. A recomendação: parcimônia, e só quando acrescenta significado.
| Tipo de animação | Trabalho que faz | Quando é demais |
|---|---|---|
| Hover em botão e link | Confirmar que o elemento é clicável | Quando muda o tamanho e empurra o texto ao redor |
| Transição de menu e modal | Orientar de onde veio o conteúdo | Quando bloqueia o clique até terminar |
| Entrada de seção na rolagem | Dar hierarquia ao que entra na tela | Quando toda seção desliza e o texto chega atrasado |
| Herói 3D ou vídeo de fundo | Contar a história da marca | Quando compete com o título e o botão principal |
| Parallax e efeito de rolagem | Dar profundidade à narrativa | Quando não há como desligar e enjoa no celular |
Fontes: Nielsen Norman Group, W3C, WCAG 2.2, consultadas em outubro de 2026.
Quanto tempo deve durar cada animação?
A maioria das animações de interface deve durar entre 100 e 500 ms, e o erro comum é passar do limite, não ficar aquém. É a faixa que o Nielsen Norman Group publica em Executing UX Animations: feedback simples em cerca de 100 ms; um modal entre 200 e 300 ms; 400 ms só para grandes deslocamentos em telas grandes; 500 ms já parece arrastado.
O Material Design 3, sistema de design do Google, publica a mesma ideia em tokens: durações curtas de 50 a 200 ms para transições utilitárias, médias de 250 a 400 ms para transições que atravessam uma área média da tela, longas de 450 a 600 ms para transições expressivas grandes, e extralongas de 700 a 1.000 ms só para transições ambientais sem ação do usuário, como um carrossel que avança sozinho. A página avisa que o Google migra para molas (springs), mas mantém os valores.
Dois detalhes mudam a sensação sem mudar o desenho. Elementos que entram pedem mais tempo do que os que saem: o Nielsen Norman Group cita um popup que leva 300 ms para aparecer e 200 ou 250 ms para sumir. E o limite de 0,1 segundo, descrito por Jakob Nielsen em Response Times: The 3 Important Limits, define quando o sistema parece reagir na hora; resposta que começa depois disso perde a sensação de causa e efeito.
Animação não é o que faz o site parecer caro. É o que faz o site parecer certo: cada movimento no lugar onde o olho precisava de ajuda.
Quanto de performance uma animação pode gastar?
Uma animação pode gastar o que não atrapalha a resposta ao toque nem move o conteúdo de lugar. Isso vira dois limites do Google. O INP, métrica dos Core Web Vitals que mede a resposta a cliques, toques e teclas, é bom até 200 ms e ruim acima de 500 ms, no percentil 75 das visitas. O CLS, que mede deslocamento inesperado de layout, é bom até 0,1 e ruim acima de 0,25. O significado de cada métrica está em Core Web Vitals em 2026.
A regra técnica cabe numa frase do guia de animações do web.dev: restrinja as animações a opacity e transform. As duas são tratadas na composição, sem recalcular layout nem repintar. No teste do guia, animar top e left descartou 50% dos quadros; a mesma animação com transform descartou 1%. Sombras com desfoque e mudanças de largura e altura são as que mais custam.
Isso pesa mais na primeira dobra, em grades com muitos cartões animando juntos e em qualquer loop. Um herói 3D bem construído cabe nesse orçamento; nós abrimos o nosso arquivo por arquivo em anatomia de um herói 3D. O que não cabe é a biblioteca pesada carregada para um efeito que o CSS resolveria.
Como respeitar quem pede menos movimento?
Respeitar quem pede menos movimento é ler a preferência do sistema operacional e entregar uma versão sem deslocamento, não uma versão sem conteúdo. A consulta de mídia prefers-reduced-motion, documentada pela MDN, detecta quando a pessoa ativou a opção de reduzir movimento no iOS, no Android, no Windows ou no macOS. O motivo, segundo a documentação: escala e deslocamento de objetos grandes podem causar desconforto em quem tem distúrbios vestibulares.
O exemplo da MDN troca uma animação que muda o tamanho por uma que só muda a opacidade. É o padrão que nós seguimos: transições de posição viram opacidade, parallax desliga, vídeos e loops param, e nada some da tela.
O critério 2.3.3 Animation from Interactions das WCAG 2.2, nível AAA, pede que movimento disparado por interação possa ser desligado quando não é essencial, e cita o parallax como exemplo dispensável. O critério 2.2.2 Pause, Stop, Hide, de nível A, vale para o que começa sozinho: conteúdo em movimento que dura mais de cinco segundos precisa de controle para pausar, parar ou ocultar, o que inclui carrossel automático e vídeo de fundo. Em sites imersivos, o checklist está em animação sem enjoar.
Quais erros fazem o visitante fechar a aba?
Cinco erros têm a mesma raiz: o movimento ganha do conteúdo.
Primeiro, a tela de abertura. O preloader com o logo se desenhando acontece antes de qualquer informação e se repete a cada visita. O limite de 1 segundo que Jakob Nielsen descreve como o ponto em que a linha de raciocínio se interrompe vale aqui.
Segundo, texto que chega atrasado. Quando cada parágrafo entra com fade e deslocamento, quem rola rápido encontra espaço em branco.
Terceiro, animação que se repete. O menu que replica a mesma sequência a cada abertura é o caso que o Nielsen Norman Group testou e os participantes classificaram como obstáculo.
Quarto, movimento sem controle. Carrossel automático, vídeo sem pausa e parallax sem alternativa reduzida violam os critérios das WCAG citados acima.
Quinto, decoração na primeira dobra. Partículas, formas flutuantes e títulos que pulsam disputam o olhar com o que a primeira dobra precisa entregar: o que a empresa faz e o que fazer a seguir. Os estudos reunidos em design vende? medem credibilidade e primeira impressão; nenhum mede movimento como fator de venda.
A auditoria vale para o site atual e para o briefing do próximo.
Inventário
Liste toda animação da página, do hover ao herói, com elemento e gatilho
Trabalho
Escreva qual dos quatro trabalhos cada uma faz; sem resposta, remova
Duração
Encurte o que passar de 500 ms sem motivo
Propriedade
Confira se o movimento usa só transform e opacity
Movimento reduzido
Ative a preferência no celular e navegue procurando buraco
Medição
Rode o PageSpeed Insights antes e depois e registre INP e CLS
Perguntas frequentes
Animação deixa o site mais lento?
Depende da propriedade animada, não da quantidade. Animações com transform e opacity rodam na etapa de composição e quase não custam; animações de largura, altura, posição e sombra recalculam o layout e derrubam quadros. O guia do web.dev mostra a mesma animação descartando 50% dos quadros numa versão e 1% na outra.
Quantas animações um site pode ter?
Não existe número; existe critério. Cada animação precisa de um trabalho (orientar, confirmar, dar hierarquia ou contar uma história) e precisa caber na faixa de duração e no orçamento de performance. Um site cheio de micro-interações curtas pode ser mais leve do que um site com uma única abertura longa. Conte trabalhos, não efeitos.
Micro-interações aumentam a conversão?
Não há estudo público que meça venda a partir de micro-interações isoladas; desconfie de percentuais sem metodologia. O que o Nielsen Norman Group mostra é indireto: feedback dentro de 0,1 segundo faz a interface parecer sob controle, e animação repetida alonga a tarefa. A micro-interação ajuda quando confirma uma ação e atrapalha quando chama atenção para si.
Vale a pena usar GSAP ou Framer Motion num site institucional?
Vale quando a sequência depende de orquestração que o CSS não resolve, como animações encadeadas pela rolagem ou um herói 3D. Para hover, menu, modal e entrada de seção, CSS puro com transform e opacity entrega o mesmo resultado sem carregar biblioteca. Qualquer biblioteca precisa respeitar prefers-reduced-motion do mesmo jeito.
Como saber se a animação do meu site está enjoando as pessoas?
Procure três sinais: reclamação direta no WhatsApp, principalmente de quem acessa pelo celular; taxa de rolagem baixa em páginas com parallax ou herói animado, visível em mapas de calor; e a ausência de alternativa, quando o site ignora a preferência de movimento reduzido. Ative a preferência no seu celular e navegue.
Conclusão
A pergunta "quanto é demais" tem resposta operacional: é demais quando o movimento não tem trabalho, dura mais do que a referência, gasta layout em vez de composição ou ignora quem pediu menos. Esses quatro filtros cabem numa reunião de aprovação e evitam a discussão de gosto.
O que sobra costuma ser pouco e preciso: hover que confirma, menu que orienta, seção que dá hierarquia e, quando a marca pede, um herói 3D que cabe no orçamento. Entre vídeo e 3D na primeira dobra, a comparação está em vídeo de fundo ou 3D no site.
Veja como o movimento foi usado em cada projeto da Brave Cross
