Microinterações com propósito

Microinterações são as pequenas respostas visuais que acontecem a cada ação: um botão que reage ao hover, uma aba que desliza ao trocar, um checkbox que confirma que foi marcado. A distinção que importa não é "tem animação ou não" — é se essa animação comunica uma mudança de estado real ou só decora.

Com propósito vs. decorativa

Uma animação com propósito responde a uma pergunta concreta: "o que mudou?". O botão ficou mais escuro porque foi clicado; a aba deslizou porque o conteúdo trocou; o card cresceu levemente porque foi selecionado. Uma animação decorativa não responde nada — ela só está lá, geralmente porque "parece mais dinâmico", e na prática distrai de quem está tentando completar uma tarefa.

Timing: rápido quase sempre vence

A duração de uma transição de interface comum (hover, troca de estado, abrir um menu) funciona melhor entre 150ms e 250ms. Abaixo disso, a mudança parece abrupta demais pra o olho perceber que houve uma transição; acima de 300-400ms, a interface começa a parecer lenta e "pesada" — a pessoa sente que está esperando a interface, em vez de a interface responder a ela.

.aba {
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}

/* uma animação de 1200ms na mesma interação faria a troca de aba
   parecer arrastada, mesmo que o efeito em si seja "bonito" isoladamente */

Isso não significa que toda animação precisa ser curta — uma transição de página inteira, ou uma celebração de conclusão de uma tarefa rara e importante, pode justificar mais tempo. A regra prática é: quanto mais frequente a interação (hover, clique comum), mais curta ela deveria ser; quanto mais rara e significativa (finalizar uma compra, completar um cadastro), mais espaço ela ganha pra respirar.