Motion
Movimento com intenção
Movimento tem função. Micro para responder, padrão para transitar, destaque para narrar.
Curvas de easing
| Token | cubic-bezier | Uso |
|---|---|---|
| --ease-standard | cubic-bezier(.2,.8,.2,1) | Padrão |
| --ease-in | cubic-bezier(.4,0,1,1) | Sair de cena |
| --ease-out | cubic-bezier(0,0,.2,1) | Entrar em cena |
Durações
Micro
140ms
--dur-micro
Hover, foco
Padrão
240ms
--dur-base
Abrir/fechar
Destaque
520ms
--dur-reveal
Reveal
Reduced motion
A regra em si mora em Acessibilidade. Aqui fica o código.
Ver regra completa em Acessibilidade@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
}
}