Stay inside the budget

Press 100–160ms, tooltips 125–200ms, menus 150–250ms, modals ≤500ms.

From find-animation-opportunities, gate 3 “Speed”.

One slider per element

Drag each slider into its green band, then use the element.

Press feedback100–160ms
300ms
Tooltip125–200ms
400ms
Dropdown150–250ms
500ms
Modal200–500ms
800ms
:root {
  --dur-press: 140ms;   /* 100–160 */
  --dur-tooltip: 160ms; /* 125–200 */
  --dur-menu: 200ms;    /* 150–250 */
  --dur-modal: 280ms;   /* 200–500 */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
.button { transition: transform var(--dur-press) var(--ease-out); }
.button:active { transform: scale(0.97); }
.tooltip {
  transition: opacity var(--dur-tooltip) var(--ease-out),
              transform var(--dur-tooltip) var(--ease-out);
}
.menu {
  transform-origin: top;
  transition: opacity var(--dur-menu) var(--ease-out),
              transform var(--dur-menu) var(--ease-out);
}
.dialog {
  transition: opacity var(--dur-modal) var(--ease-out),
              transform var(--dur-modal) var(--ease-out);
}

Guess the duration

Watch the menu open, then call it.

Round 10 / 0

    Ten opens, back to back

    Press Run and compare the timers.

    600msBad
    transform 600ms ease-out0 / 10 · 0.0s
    200msGood
    transform 200ms var(--ease-out)0 / 10 · 0.0s

    Why it matters, pros and cons

    Why it matters

    Past about 300ms people notice they are waiting. Budgets grow with size.

    Pros

    • The interface answers input, not performs.
    • Repeated opens don't compound into waiting.
    • Easy to audit: grep durations over 300ms.

    Cons

    • Modals and drawers may need up to 500ms.
    • Under about 100ms, motion reads as a glitch.
    • Keyboard or 100+/day surfaces should be 0ms.