Keep UI motion under 300ms

Most UI motion stays under 300ms; bigger surfaces get a little more.

Emil Kowalski@emilkowalski
Animation duration should scale with the size of the animated element. Small UI elements like dropdowns can feel great under ~200ms. But large transitions, like full-screen menus, need more time to avoid feeling abrupt since they feel "heavier". Here's 150ms vs 300ms:
Apr 13, 2026Demo 2 ↓View on X ↗
Emil Kowalski@emilkowalski
Keep your animations fast. A faster-spinning spinner makes you think the app loads faster. It improves perceived performance.
Jul 28, 2025View on X ↗
Emil Kowalskiemilkowal.ski
A 180ms dropdown animation feels more responsive than a 400ms one.
You don't need animationsDemo 1 ↓Read article ↗
Emil Kowalskiemilkowal.ski
UI animations should generally stay under 300ms
7 practical animation tipsDemo 3 ↓Read article ↗

From emil-design-eng, “How fast should it be?”.

Same dropdown, 400ms vs 180ms

Open both menus and compare how soon each feels ready.

SlowBad
    transition: transform 400ms, opacity 400ms
    FastGood
      transition: transform 180ms, opacity 180ms
      .menu {
  transform-origin: top left;
  transform: scale(0.96) translateY(-4px);
  opacity: 0;
  transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out);
}
.menu[data-open] { transform: none; opacity: 1; }

      Duration scales with size

      Drag the duration; the dropdown and full-screen menu disagree.

      Small: dropdownGood
      • Date
      • Amount
      • Vendor
      • Status
      150ms / 150–250ms
      Large: full-screenAbrupt
      150ms / 250–450ms
      .dropdown   { transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out); }
.fullscreen { transition: transform 350ms var(--ease-drawer), opacity 350ms var(--ease-drawer); }

      Pick an element, get a range

      Choose an element, set a duration, then press Play.

      180ms · inside 150–250ms for dropdowns

      • Rename
      • Duplicate
      • Archive
      ElementDuration
      Button press100–160ms
      Tooltip, small popover125–200ms
      Dropdown, select150–250ms
      Modal200–300ms
      Drawer, sheet250–500ms
       
      :root {
  --dur-press: 140ms;
  --dur-tooltip: 150ms;
  --dur-dropdown: 180ms;
  --dur-modal: 250ms;
}
.overlay, .dialog { transition-duration: var(--dur-modal); }

      Why it matters, pros and cons

      Why it matters

      Every millisecond of motion is waiting. Bigger surfaces need a bit more.

      Pros

      • Feels responsive without changing real performance.
      • Frequent actions stop adding up to waiting.
      • A small token scale keeps motion consistent.

      Cons

      • Full-screen menus and sheets need 300–500ms.
      • Under ~100ms, a dropdown reads as a flash.
      • Explanatory marketing motion can run longer.