Skip to main content

Motion

Refere-se a duração e suavização das animações entre os estados dos componentes.

Duration#

Refere-se ao tempo de transição de um ponto ao outro.

TokenValor (ms)
duration-extra-fast70 ms
duration-fast110 ms
duration-normal150 ms
duration-moderate240 ms
duration-slow400 ms
duration-extra-slow700 ms

Timing#

Refere-se ao suavição do movimento.

TokenValor
timing-standartCubic-Bezier (0.35, 0.00, 0.10, 1.00)
timing-enteringCubic-Bezier (0.30, 0.00, 1.00, 0.80)
timing-exitingCubic-Bezier (0.10, 0.00, 0.00, 1.00)
timing-continuosCubic-Bezier (0.00, 0.00, 0.00, 0.00)