Motion

Keep it short

• Buttons. 120 to 180 ms.

• Cards. 200 to 350 ms.

• Sheets and popups. 300 to 400 ms.

• Page changes. 400 to 600 ms.

• The curve. cubic-bezier(0.4, 0, 0.2, 1), with no overshoot.

• Loops. Anything that loops has a way to pause it.

When people reduce motion

Reduced, never removed. When the device asks for reduced motion, swap slides, springs and zooms for short cross fades, so the change still shows.

.button { transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1); }
.button:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .button { transition: opacity 120ms ease; }
  .button:active { transform: none; opacity: 0.8; }
}