Recommended Duration Budgets for UI Animations: A Standards-Based Guide

The emilkowalski/skills repository defines specific duration budgets ranging from 100 ms for button presses to 500 ms for modals, with a strict global rule requiring all UI animations to remain under 300 ms unless they are marketing or explanatory content.

The emilkowalski/skills repository establishes concrete timing constraints for interface motion to balance visual polish with perceived performance. These recommendations are codified in the Animation Standards Reference and serve as the canonical guide for all UI motion in the project.

Component-Specific Duration Budgets

According to skills/review-animations/STANDARDS.md, the repository categorizes UI elements into distinct timing tiers based on their scale and interaction frequency.

Button Press Feedback (100 – 160 ms)

Button press feedback requires the shortest duration to ensure tactile responsiveness. This micro-interaction confirms the user's input without creating a sense of delay.

Tooltips and Small Popovers (125 – 200 ms)

Tooltips and small popovers receive a slightly longer window than button presses. This range provides enough time for the eye to register the new element while maintaining the snappiness expected of auxiliary content.

Dropdowns and Selects (150 – 250 ms)

Dropdown menus and select inputs occupy the middle tier. These components require enough duration to communicate spatial change and directionality without blocking the user's workflow.

Modals and Drawers (200 – 500 ms)

Modals and drawers represent the largest UI surface area changes and consequently receive the widest budget range. While these can extend up to 500 ms, the global 300 ms cap applies unless the component qualifies for an exception.

Marketing and Explanatory Animations

Marketing or explanatory animations are the sole exception to the strict caps. These educational sequences can be longer than standard UI elements because they serve a different cognitive purpose—drawing attention or demonstrating concepts rather than facilitating task completion.

The 300 Millisecond Global Cap

The repository enforces a global rule that mandates all UI animations stay under 300 ms unless the element falls into the marketing or explanatory category. This constraint is codified in skills/review-animations/STANDARDS.md and ensures that interactive elements feel snappy and that visual feedback does not introduce perceived latency.

The skills/improve-animations/AUDIT.md file specifically references this limit, containing automated checks designed to flag duration violations where UI animations exceed 300 ms.

Rationale and Best Practices

The duration budgets serve a dual purpose grounded in user experience research and accessibility standards.

Perceived Performance

Shorter transition times make loading and interactions feel faster, even when the actual wait time remains unchanged. When UI motion completes rapidly—within the 100–300 ms window—the user's brain interprets the interface as responsive and high-performing.

Consistency and Accessibility

Uniform timing across similar components creates predictable motion patterns that users subconsciously learn. The "under 300 ms" ceiling leaves sufficient headroom for reduced-motion preferences to scale down durations further without breaking the experience or causing jarring snap-changes.

CSS Implementation Examples

The standards translate directly into CSS custom properties and transition declarations. Here are the canonical implementations based on the component tiers:

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

/* Tooltip – 150ms ease */
.tooltip {
  --duration-tooltip: 150ms;
  transition: opacity var(--duration-tooltip) ease,
              transform var(--duration-tooltip) ease;
}

/* Dropdown – 200ms ease-out */
.dropdown {
  --duration-dropdown: 200ms;
  transition: opacity var(--duration-dropdown) ease-out,
              transform var(--duration-dropdown) ease-out;
}

/* Modal – 350ms ease-out */
.modal {
  --duration-modal: 350ms;
  transition: opacity var(--duration-modal) ease-out,
              transform var(--duration-modal) ease-out;
}

All durations reference the standards table; adjust exact values per component within the prescribed ranges as needed.

Standards Documentation and Audit Files

These duration budgets are maintained across four key files in the repository:

• skills/review-animations/STANDARDS.md – Central authority for animation durations, easing curves, and related rules.
• skills/review-animations/SKILL.md – Links to the standards for reviewers and enforces duration conventions during code reviews.
• skills/improve-animations/AUDIT.md – Contains audit checks for duration violations, specifically flagging UI durations exceeding 300 ms.
• skills/improve-animations/PLAN-TEMPLATE.md – Template for motion-related changes, ensuring new animations follow the established duration budget before implementation.

Summary

• Button feedback should complete in 100–160 ms to feel immediate and tactile.
• Tooltips and dropdowns occupy the middle range of 125–250 ms.
• Modals can extend to 500 ms, but must respect the 300 ms global cap unless classified as marketing content.
• The 300 ms ceiling ensures perceived performance remains high and accommodates accessibility preferences for reduced motion.
• All standards are enforced through the skills/review-animations/ and skills/improve-animations/ documentation paths.

Frequently Asked Questions

What is the maximum recommended duration for standard UI animations?

The hard limit is 300 ms for all standard UI animations. Only marketing or explanatory animations are exempt from this ceiling, as defined in skills/review-animations/STANDARDS.md. The skills/improve-animations/AUDIT.md file contains automated checks to enforce this constraint.

Why are button press animations limited to 100–160 ms?

Button presses use the shortest duration budget to maximize perceived responsiveness. Since these are high-frequency micro-interactions, any delay above 160 ms risks making the interface feel sluggish or unresponsive to user input.

Where are these animation standards defined in the codebase?

The canonical definitions live in skills/review-animations/STANDARDS.md. This file serves as the single source of truth for duration ranges. Review guidelines are documented in skills/review-animations/SKILL.md, while audit logic resides in skills/improve-animations/AUDIT.md.

How does the 300ms rule affect accessibility?

The 300 ms cap provides a safety buffer for users who enable reduced-motion preferences. When systems scale down or disable animations, the brief base duration ensures the interface remains functional without abrupt jumps or broken transitions that might occur with longer, more complex animations.

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