Motion
Como o movimento funciona no ME — durações, curvas, onde usar e o respeito a "reduzir movimento". Funcional, nunca decorativo.
Movimento no ME é funcional: confirma uma ação, orienta de onde algo veio / para onde vai, ou mostra progresso. Nunca é enfeite. Na dúvida, menos.
Princípios
- Rápido e discreto — a transição não pode atrasar a tarefa; o usuário mal a percebe conscientemente.
- Com propósito — anima só o que comunica (estado, entrada/saída, progresso). Sem movimento autônomo (parallax, auto-play, loop decorativo).
- Consistente — a mesma ação anima do mesmo jeito em qualquer tela.
Durações
As transições do guide ficam em ~150–300 ms — a UI gira em torno de 200 ms:
| Faixa | Quando |
|---|---|
| ~150 ms | micro-feedback: hover, foco, troca de cor de um controle |
| ~200 ms (padrão) | a maioria das transições — cor (transition-colors), transform, realces |
| ~300 ms | superfícies maiores entrando/saindo: drawer, modal, sheet, popover |
Acima de ~300 ms o movimento começa a "pesar"; abaixo de ~100 ms some sem comunicar.
Curvas (easing)
ease-outpara entradas (algo aparecendo / expandindo) — começa rápido e desacelera.easepara transições simples de estado/cor.- Evite
linear(mecânico) eease-inisolado em entradas (parece travar no início).
Onde usar
transition-colors— hover, foco, estado ativo/selecionado (o caso mais comum).transform(translate/scale) — movimento e abertura de painéis; mais barato que animar o layout.opacity— fade de overlays e de conteúdo que entra.animate-spin— spinner de loading.animate-pulse— skeleton.- Gráficos: a série não-selecionada perde opacidade (não some) — mantém o contexto.
Reduzir movimento (acessibilidade)
O guide respeita prefers-reduced-motion: reduce globalmente: transições e animações caem para ~0 e loops/auto-play se desligam. Quem ativa "reduzir movimento" no sistema mantém a UI 100% funcional, sem animação. Nunca dependa do movimento para transmitir informação — ele é sempre reforço, não o canal. Ver Acessibilidade.