O que motion faz?
Motion explica mudanças e confirma entrada do usuário. Se não faz nenhum dos dois, é decoração e precisa de justificativa.
1. Deve animar?
| Com que frequência o usuário vê | Decisão |
|---|---|
| 100+ vezes ao dia (atalhos, alternância de paleta, digitação) | Nunca animar |
| Dezenas de vezes (hover, navegação em lista, abas) | Pouco ou nada (cor/opacidade abaixo de 150ms) |
| Ocasionalmente (modal, gaveta, toast, dropdown) | Transição padrão |
| Raramente (onboarding, sucesso, herói da primeira visita) | Espaço para encanto |
Nunca animar ações acionadas por teclado.
2. Easing
- Entrando ou saindo: ease-out forte
cubic-bezier(.23, 1, .32, 1). - Movendo na tela: ease-in-out
cubic-bezier(.77, 0, .175, 1). - Gavetas/painéis:
cubic-bezier(.32, .72, 0, 1). - Cor/hover:
ease. Movimento constante (marquee, progresso):linear. - Nunca use
ease-inpara UI; parece lento no momento em que o usuário está observando.
3. Duração
Pressionamento 100-160ms · tooltip 125-200ms · dropdown 150-250ms · modal/gaveta 200-400ms · herói de marketing até 800ms. Saídas ~20% mais rápidas que entradas. Movimento de UI deve ficar abaixo de 300ms.
4. Regras de execução
- Animar apenas
transformeopacity. Nuncawidth,height,top,leftoutransition: all. - Nada aparece a partir de
scale(0); comece emscale(.95)+opacity: 0. - Popovers e menus escalonam a partir do gatilho (
transform-originno gatilho). Modais permanecem centralizados. - Botões:
:active { transform: scale(.97) }com transição de 120ms. - Tooltips: atrasar o primeiro (~400ms); adjacentes abrem instantaneamente.
- Listas escalonadas: 30-50ms por item, limite total abaixo de 400ms.
- Revelações de scroll: no máximo uma por página, distância pequena (8-16px), executar uma vez. Não em toda seção.
- Molas (Motion/Framer, React Spring) para arrasto, gestos e movimento interrompível:
{ type: "spring", duration: .4, bounce: .15 }. Mantenha bounce entre 0.1 e 0.3, apenas em superfícies lúdicas. - Prefira transições CSS e
@starting-stylepara entrada/saída simples; a View Transitions API para mudanças de página/estado; uma biblioteca JS apenas quando gestos ou sequências forem necessários.
5. Movimento reduzido (obrigatório)
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
Mantenha alterações de opacidade e cor de estado; remova movimento, parallax e tremor.
Formato de revisão
Ao revisar código de motion, responda com uma tabela: | Antes | Depois | Motivo |, uma linha por problema.