Animação na web que comunica: duração, curva e quando não animar

Quase toda animação ruim que vejo tem a mesma origem: foi adicionada porque era possível, não porque comunicava algo. O resultado é interface que parece enfeitada e usa mal o tempo de quem só queria terminar uma tarefa.

Movimento tem função. Ele diz de onde um elemento veio, avisa que algo mudou de estado, confirma que o clique foi registrado, prepara o olho para uma informação nova. Quando não faz nenhuma dessas coisas, ele atrasa.

Este texto tem demonstrações rodando de verdade. Você pode repetir cada uma e ver o código que a produz.

1. A duração quase sempre é menor do que você imagina

É o erro mais comum, e o mais fácil de corrigir. A intuição pede algo em torno de meio segundo; a prática pede menos da metade disso.

• Transição de estado — hover, foco, troca de aba: 150 a 250 ms.
• Algo entrando em cena — painel, modal, item de lista: 250 a 450 ms.
• Acima de 500 ms: só se o movimento em si for a informação. Fora disso, a pessoa fica esperando.

O teste é simples e cruel: use a interface cinquenta vezes seguidas, como quem trabalha nela o dia inteiro. A animação que era elegante na primeira vez vira obstáculo na trigésima. Num painel administrativo, meio segundo por clique é irritação acumulada.

Veja um elemento entrando com duração curta e curva de desaceleração — o padrão que resolve a maior parte dos casos:

Repare que ele sobe poucos pixels. Deslocamento grande chama atenção para a animação; deslocamento pequeno apenas sugere de onde o elemento veio. A sutileza é o que faz parecer profissional.

2. A curva importa mais que a duração

Movimento linear parece mecânico porque nada no mundo físico começa e para instantaneamente. Um objeto acelera, se desloca, desacelera. A curva é o que traduz isso.

A regra que uso:

• Saindo — algo que desaparece: comece rápido. A pessoa já decidiu, não precisa acompanhar a saída.
• Entrando — algo que aparece: termine devagar. Dá tempo do olho encontrar o elemento e ler.
• Rotação contínua — um indicador girando: aqui linear é o certo, porque não existe começo nem fim para acentuar.

Existe ainda a curva que passa do valor final e volta. Ela dá sensação de peso físico e funciona bem em elemento pequeno que aparece — um selo, um ícone, um contador:

Em bloco grande esse exagero parece instabilidade. Guarde para o que é pequeno e pontual.

3. A propriedade que você anima define se trava

Esta é a parte técnica que mais muda o resultado e que quase nenhum tutorial de design menciona.

Para desenhar cada quadro, o navegador passa por três etapas: calcular onde tudo fica (layout), pintar os pixels (paint) e juntar as camadas (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.
• Médio: background-color, box-shadow, filter. Repintura.
• Caro: width, height, top, left, margin. Refazem o layout — e mexer num elemento pode obrigar a recalcular os vizinhos.

Um elemento animando caro não derruba nada. Quarenta na mesma tela derrubam — e é sempre no celular de quem tem o aparelho mais simples.

Compare. Este cartão abre animando a altura, que é a opção cara:

Funciona, e às vezes é necessário: um painel que expande precisa mesmo empurrar o conteúdo de baixo. A questão é fazer por necessidade, uma vez na tela — não por hábito, em lista longa.

Já este revela o conteúdo sem tocar no layout, usando recorte:

O espaço do elemento já está reservado desde o primeiro quadro. Nada empurra nada.

4. Repetição contínua é orçamento de atenção

Animação que roda para sempre — pulso, brilho, respiração — consome atenção enquanto existir. Uma por tela, no máximo, e só onde você realmente quer o olho.

O pulso abaixo marca algo novo sem piscar na cara de ninguém. Note a pausa longa entre as ondas: brilho contínuo vira ruído e as pessoas aprendem a ignorar.

O mesmo raciocínio vale para o brilho que atravessa um botão. No CTA principal, funciona. Em cinco botões da mesma página, você não tem cinco chamadas — tem zero, porque nenhuma se destaca.

5. Movimento como resposta a erro

Um caso em que a animação carrega informação real: rejeitar um valor. O campo balança de leve e a pessoa entende que algo deu errado antes de ler a mensagem.

Amplitude pequena, duração curta. Balanço grande e demorado parece brincadeira, não aviso — e em formulário de pagamento, parecer brincadeira é o oposto do que você quer.

E o movimento não substitui o texto: ele chega antes. A mensagem explicando o problema continua obrigatória, inclusive para quem usa leitor de tela e não vê balanço nenhum.

6. Quem não pode ver movimento

Existe gente que sente desconforto físico real com animação 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. A regra prática:

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

Todas as demonstrações desta página já vêm com isso — está no código que você pode copiar.

7. As perguntas que faço antes de animar

Um roteiro curto que evita a maior parte dos problemas:

1. O que isso comunica? Se a resposta é "fica bonito", provavelmente não deveria existir ali.
2. Quantas vezes a pessoa vai ver? Quanto mais repetição, mais curta a animação.
3. Estou animando propriedade barata? Se é width ou top, existe alternativa com transform?
4. Isso funciona no aparelho mais fraco do meu público? Não no seu computador de trabalho.
5. E se a pessoa preferir menos movimento?

Nenhuma dessas é sobre gosto. Todas são verificáveis.

O resumo

Animação boa é a que você não percebe — ela só faz a interface parecer coerente, como se as coisas tivessem vindo de algum lugar em vez de piscarem na tela. Animação ruim é a que você nota, e depois nota de novo, e na décima vez já está torcendo para ela terminar.

Duração curta, curva que desacelera na entrada, propriedade barata, repetição contida e respeito a quem não pode ver movimento. Com esses cinco, você acerta a maior parte das decisões sem precisar de talento especial para movimento — só de critério.

As peças usadas aqui, e mais uma dúzia, estão no acervo de animações, com o código comentado de cada uma.