Recommended Animation Durations for UI Elements: The emilkowalski/skills Guide

The emilkowalski/skills repository recommends keeping most UI animations under 300ms, with specific ranges for buttons (100–160ms), tooltips (125–200ms), dropdowns (150–250ms), and modals (200–500ms), while using only transform and opacity properties for GPU acceleration.

The emilkowalski/skills repository establishes definitive animation standards that balance visual feedback with interface responsiveness. Documented primarily in skills/review-animations/STANDARDS.md, these guidelines provide purpose-driven duration ranges for different component types to ensure motion feels snappy and intentional. Adhering to these recommended animation durations helps developers create interfaces that respond instantly while maintaining smooth 60fps performance.

Animation Duration Guidelines by Component

According to the standards defined in the repository, each UI element category has a specific recommended duration range to maintain consistency across the interface:

• Button press feedback: 100–160ms
• Tooltips and small popovers: 125–200ms
• Dropdowns and selects: 150–250ms
• Modals and drawers: 200–500ms
• Marketing and explanatory animations: Can be longer than 500ms when warranted

The overarching rule specified in skills/review-animations/STANDARDS.md mandates that UI animations should stay under 300ms to preserve a responsive feel. While faster interactions like dropdowns feel more immediate, longer-lasting elements such as modals can extend up to 500ms to accommodate their spatial impact and complexity.

Architectural Rationale

The duration guidelines follow four core architectural principles that govern motion in the system.

Frequency-Based Motion

Animation duration should correlate with interaction frequency. Elements used hundreds of times a day—such as keyboard shortcuts—should have no animation to eliminate latency. Frequently interacted components like hover effects and list navigation require reduced or minimal motion. Occasional or celebratory UI elements can utilize the standard duration ranges listed above.

Easing Consistency

Entry and exit motions should use ease-out to create a perception of speed and responsiveness. For on-screen movement between states, prefer ease-in-out to maintain natural motion physics. The standards recommend pairing these easing curves with the duration ranges to ensure visual consistency across components.

Physicality and Transform Origin

To maintain visual consistency, apply subtle scaling transformations (for example, scale(0.97)) within the same duration ranges. This physical feedback reinforces the interactive nature of components without breaking the timing budget or creating visual dissonance.

Performance Considerations

Animations must target only transform and opacity properties to remain GPU-accelerated. Keeping durations under the 300ms ceiling aligns with typical frame budgets (approximately 60fps), preventing jank and ensuring smooth motion across devices.

CSS Implementation Examples

The following code patterns from the repository demonstrate how to apply these duration standards in practice.

Button Press Feedback (100–160ms)

Use a custom ease-out curve with a 130ms duration and subtle scale reduction:

/* Custom easing variable */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);

/* Button animation */
.button {
  transition: transform 130ms var(--ease-out), opacity 130ms var(--ease-out);
}
.button:active {
  transform: scale(0.97);
  opacity: 0.9;
}

Tooltips and Small Popovers (125–200ms)

Tooltips should use a 150ms duration with a slight vertical translation:

.tooltip {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.tooltip[data-visible] {
  opacity: 1;
  transform: translateY(0);
}

Dropdowns and Selects (150–250ms)

Dropdown menus benefit from a 200ms duration with vertical scale transformation:

.select__menu {
  opacity: 0;
  transform: scaleY(0.9);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.select__menu[data-open] {
  opacity: 1;
  transform: scaleY(1);
}

Modals and Drawers (200–500ms)

Modal and drawer animations can extend to 300ms to accommodate their larger spatial footprint:

.modal,
.drawer {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.modal[data-open],
.drawer[data-open] {
  opacity: 1;
  transform: translateY(0);
}

Marketing and Explanatory Animations

Marketing animations may exceed the 300ms limit when the context warrants slower, more deliberate motion:

.hero-animation {
  animation: slideIn 800ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes slideIn {
  from { transform: translateX(-20%); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}

Key Source Files

The animation standards are distributed across several files in the repository:

• skills/review-animations/STANDARDS.md — Contains the definitive duration table, easing curves, and comprehensive motion rules.
• skills/review-animations/SKILL.md — Provides the skill template used during code reviews to enforce these standards.
• skills/animate/RECIPES.md — Demonstrates practical animation recipes applying the duration guidelines.
• README.md — Offers a high-level overview and links to the animation standards documentation.

Summary

• Keep animations under 300ms for interactive UI elements to ensure responsiveness and maintain 60fps performance.
• Match duration to component type: 100–160ms for buttons, 125–200ms for tooltips, 150–250ms for dropdowns, and 200–500ms for modals.
• Animate only transform and opacity to maintain GPU acceleration and prevent layout thrashing.
• Use ease-out for entry/exit and ease-in-out for on-screen movement to create natural-feeling motion.
• Eliminate animation entirely for high-frequency interactions used hundreds of times daily.
• Reference skills/review-animations/STANDARDS.md for the complete specification and implementation details.

Frequently Asked Questions

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

According to skills/review-animations/STANDARDS.md, standard UI animations should stay under 300ms to maintain a responsive feel. While modals and drawers can extend up to 500ms due to their complexity, most interactive elements like buttons and dropdowns should complete their motion within 250ms to avoid perceived latency.

Why should animations only use transform and opacity properties?

Restricting animations to transform and opacity ensures the browser can offload the work to the GPU, preventing layout thrashing and maintaining smooth 60fps performance. This constraint is fundamental to the performance standards outlined in the repository's animation guidelines.

How should easing functions be selected for different animation types?

For entry and exit animations, use ease-out (or a custom cubic-bezier like cubic-bezier(0.23, 1, 0.32, 1)) to create a perception of speed and snappiness. For elements moving on screen or changing position, use ease-in-out to maintain natural physical motion that feels grounded and responsive.

Which UI elements should have no animation according to the standards?

Elements used hundreds of times per day—such as keyboard shortcuts or rapid-fire micro-interactions—should have zero animation to eliminate any latency that could compound over frequent use. The standards recommend this "frequency-based motion" approach to prioritize performance for power-user workflows.

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