The Force Design Spec / Motion

Motion

Duration and easing tokens for animations and transitions. Hover the demo tracks to see each token in action.

Duration

--force-duration-fast 150ms

150ms. Hover, color changes, toggles.

--force-duration-normal 250ms

250ms. Panel open/close, fade in/out.

--force-duration-slow 350ms

350ms. Page transitions.

--force-duration-entrance 500ms

500ms. First-paint entrance animations.

Easing

--force-easing-standard cubic-bezier(0.4, 0, 0.2, 1)

Default easing for most transitions.

--force-easing-decelerate cubic-bezier(0, 0, 0.2, 1)

Enter/appear animations.

--force-easing-accelerate cubic-bezier(0.4, 0, 1, 1)

Exit/leave animations.