How to Choose the Correct Animation Duration for UI Interactions

Keep standard UI animations under 300 ms, using 100–160 ms for button feedback, 125–200 ms for tooltips, and 150–250 ms for dropdowns to maintain perceived performance and responsiveness.

Choosing the correct animation duration is essential for building interfaces that feel fast and intentional rather than sluggish. In the Skills repository by Emil Kowalski, the official motion design standards in skills/review-animations/STANDARDS.md provide specific duration ranges and a hard upper bound of 300 ms for everyday UI elements.

Animation Duration Standards in STANDARDS.md

The canonical duration guidance lives in skills/review-animations/STANDARDS.md (lines 41‑48), where each UI element type is paired with a recommended range. These values are designed to keep interactions feeling snappy while allowing enough time for users to perceive the change.

The 300 Millisecond Ceiling

For any standard UI animation—buttons, dropdowns, modals, or navigation—the hard upper limit is 300 ms. Exceeding this threshold risks making the interface feel slow, even if the underlying code executes instantly. Marketing or celebratory animations may run longer, but only when explicitly documented as non-essential "delight" moments.

Recommended Durations by Component Type

According to the source table in STANDARDS.md, use these ranges:

• Button press feedback: 100 – 160 ms
• Tooltips & small popovers: 125 – 200 ms
• Dropdowns & selects: 150 – 250 ms
• Modals & drawers: 200 – 500 ms (capped at 300 ms for standard UI)
• Marketing or explanatory animations: Can exceed 300 ms with justification

Why Animation Duration Matters

Duration directly impacts how users perceive speed and quality. The STANDARDS.md file emphasizes three core principles:

Perceived Performance

Users judge application speed by the feel of motion, not by actual load time. A 180 ms dropdown feels snappier than a 400 ms one, even when the underlying data request takes identical time. Shorter durations create the illusion of instantaneous response.

Frequency and Purpose

Frequently triggered interactions (button presses, hover states) should animate very quickly to avoid fatigue. Occasional or celebratory interactions (onboarding modals, success animations) can be slightly slower to add personality, provided they remain under the 300 ms ceiling for UI-focused motion.

A 4-Step Decision Framework

Follow this flow defined in the Skills repository to pick the correct value:

1. Identify the element’s role—feedback, navigation, overlay, or educational content.
2. Pick the matching duration range from the component table above.
3. Enforce the 300 ms ceiling for any UI-focused animation unless strong justification exists (e.g., a marketing storyboard).
4. Adjust for context—if the animation is part of a "delight" moment (first-time onboarding), you may extend modestly but keep it well under one second.

Implementing Duration Tokens in Code

To maintain consistency across CSS and JavaScript, declare reusable tokens and reference them in all animation contexts.

CSS Custom Properties

Define duration variables once in a base stylesheet to enforce the standards:

:root {
  --duration-button: 120ms;   /* within 100–160ms */
  --duration-tooltip: 150ms;  /* within 125–200ms */
  --duration-dropdown: 200ms; /* within 150–250ms */
  --duration-modal: 300ms;    /* capped at 300ms for UI */
}

/* Button press feedback */
button {
  transition: transform var(--duration-button) var(--ease-out);
}
button:active {
  transform: scale(0.97);
}

/* Tooltip fade-in */
.tooltip {
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity var(--duration-tooltip) var(--ease-out),
    transform var(--duration-tooltip) var(--ease-out);
}
.tooltip[data-visible] {
  opacity: 1;
  transform: translateY(0);
}

Synchronizing with Web Animations API

When using JavaScript-based animations (WAAPI), read values from CSS to prevent drift:

const btn = document.querySelector('button');
const duration = getComputedStyle(document.documentElement)
                  .getPropertyValue('--duration-button')
                  .trim();               // "120ms"

btn.addEventListener('click', () => {
  btn.animate(
    [{ transform: 'scale(0.97)' }],
    { duration: parseFloat(duration), easing: 'cubic-bezier(0.23,1,0.32,1)' }
  );
});

Framer Motion Integration

For React applications, consume the same CSS variables to keep durations aligned:

import { motion } from "framer-motion";

const duration = parseFloat(
  getComputedStyle(document.documentElement).getPropertyValue('--duration-dropdown')
);

export const Dropdown = () => (
  <motion.div
    initial={{ opacity: 0, y: -4 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: duration / 1000, ease: [0.23, 1, 0.32, 1] }}
  >
    {/* dropdown content */}
  </motion.div>
);

Enforcing Standards in Code Reviews

The repository includes tooling to validate durations during development. The skills/review-animations/SKILL.md file describes how reviewers should flag animation durations exceeding 300 ms without documentation. Additionally, skills/improve-animations/AUDIT.md provides a checklist for prioritizing fixes based on the duration standards defined in STANDARDS.md. The README.md at the repository root links to these resources for comprehensive governance.

Summary

• Cap UI animations at 300 ms to maintain perceived performance.
• Map durations to component types: 100–160 ms for buttons, 125–200 ms for tooltips, 150–250 ms for dropdowns.
• Use CSS custom properties as single sources of truth for duration values across CSS and JavaScript.
• Reference skills/review-animations/STANDARDS.md lines 41‑48 for the canonical duration table.
• Audit violations using the review guidelines in SKILL.md and AUDIT.md.

Frequently Asked Questions

What is the maximum recommended animation duration for standard UI animations?

The hard ceiling is 300 ms for any everyday UI motion, as documented in skills/review-animations/STANDARDS.md. Modals, drawers, and dropdowns should all respect this limit unless they serve a specific marketing or educational purpose that justifies slower motion.

How do I implement consistent animation durations in JavaScript frameworks?

Read duration values from CSS custom properties using getComputedStyle and apply them in your animation library. For Framer Motion, parse the CSS variable to milliseconds and divide by 1000 for the duration prop. For WAAPI, use parseFloat directly on the computed style value.

Why should button animations be faster than modal animations?

Button presses occur frequently and require immediate feedback (100–160 ms) to feel responsive. Modals appear less often and involve larger spatial changes, so they can occupy the upper end of the range (up to 300 ms) without feeling sluggish. Matching duration to interaction frequency prevents user fatigue.

Where can I find the official animation duration standards?

The canonical table resides in skills/review-animations/STANDARDS.md at lines 41‑48. Supporting review guidelines are in skills/review-animations/SKILL.md, and audit checklists appear in skills/improve-animations/AUDIT.md within the emilkowalski/skills repository.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}