In motion.

Five durations and three easing curves carry every transition. Short and quiet by default, slower only for large surfaces, so the interface settles rather than performs.

Durations

--duration-instant · 100ms

Hover, toggle

--duration-fast · 200ms

Most transitions

--duration-normal · 300ms

Enter / exit, default

--duration-slow · 500ms

Large surfaces

--duration-shimmer · 1.5s

Loading shimmer

Easing

Default

--ease-default · cubic-bezier(0.4, 0, 0.2, 1)

Standard

Enter

--ease-enter · cubic-bezier(0, 0, 0.2, 1)

Decelerate in

Exit

--ease-exit · cubic-bezier(0.4, 0, 1, 1)

Accelerate out

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait