# CSS Example: No Animation on Command Palette for High‑Frequency UI

> Learn how to disable CSS animations on command palettes for instant UI rendering. Ensure high-frequency elements remain responsive and improve user experience.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: tutorial
- Published: 2026-08-06

---

**Command palettes and other keyboard‑initiated UI elements invoked more than 100 times per day must render instantly without CSS animations to preserve perceived responsiveness.**

This principle is codified in `emilkowalski/skills`, a repository focused on animation best practices for product teams. The codebase treats animation as a frequency‑gated decision: the more often a user encounters an element, the less animation it should have. For the command palette — opened potentially hundreds of times daily — the rule is absolute zero animation.

## Why Animations Break Command Palettes

The repository's **Animation Standards Reference** establishes a hard rule in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) (lines 9–14):

- Elements appearing **> 100 times per day** → **never animate**
- Elements appearing **10–100 times per day** → **subtle animation (≤200ms)**
- Elements appearing **< 10 times per day** → **full animation permitted**

Command palettes fall squarely in the highest frequency tier. According to the source, animating these interactions "makes the UI feel slower and breaks the sense of immediacy that users expect from keyboard shortcuts."

## How the Repository Enforces This Rule

### Skill: Find Animation Opportunities

In [`skills/find-animation-opportunities/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/find-animation-opportunities/SKILL.md) (lines 31–36), the implementation includes an explicit gate that **rejects** animation proposals for command‑palette toggles. This prevents well‑meaning developers from adding polish that would actually degrade the experience.

### Skill: Audit Existing Animations

The audit workflow in [`skills/improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/AUDIT.md) (lines 11–16) references the same frequency table, ensuring consistent decision‑making across all UI reviews. When auditing a codebase, the command palette is flagged as a **must‑not‑animate** element.

## CSS Implementation: Zero Animation

### Remove All Transition Properties

The minimal correct implementation has no animation‑related CSS whatsoever:

```css
/* Command palette – instant open/close */
.command-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  /* No transition, no animation, no @keyframes */
}

```

### React/TSX Without Animation

From [`CommandMenu.tsx`](https://github.com/emilkowalski/skills/blob/main/CommandMenu.tsx), the repository shows how to handle open/close state without animation libraries or CSS transitions:

```tsx
export const CommandMenu = ({ isOpen, onClose }) => (
  <div
    className="command-menu"
    style={{ display: isOpen ? "block" : "none" }}
    role="dialog"
    aria-modal="true"
  >
    {/* Menu contents render instantly */}
  </div>
);

```

Note the use of `display` rather than `opacity` with a transition. This avoids even the **possibility** of a partially visible, animating state.

### Migrating Away from Existing Animations

If your codebase currently animates the command palette, remove the transition entirely:

```diff
- .command-menu {
-   opacity: 0;
-   transform: scale(0.95);
-   transition: opacity 200ms ease-out, transform 200ms ease-out;
- }
- .command-menu.is-open {
-   opacity: 1;
-   transform: scale(1);
- }

+ .command-menu {
+   display: none;
+ }
+ .command-menu.is-open {
+   display: block;
+ }

```

## Design Philosophy: Restraint Over Polish

The repository's [`README.md`](https://github.com/emilkowalski/skills/blob/main/README.md) (lines 30–38) advocates for **restraint** in animation design. This is not austerity for its own sake — it is **user‑centric optimization**. Keyboard users develop muscle memory and expect instantaneous feedback. Any delay, even 150ms, disrupts flow state and compounds across hundreds of daily invocations.

## Reduced Motion Context

While the command palette has no animation by default, the repository includes a pattern for respecting `prefers-reduced-motion` on elements that *do* animate:

```css
@media (prefers-reduced-motion: reduce) {
  .tooltip {
    transition: opacity 100ms linear;
  }
}

```

This shows the codebase's systematic approach to motion design, even though the command palette itself bypasses animation entirely.

## Summary

- **Frequency determines animation**: The `emilkowalski/skills` repository uses a strict tiered system where daily usage count dictates animation permissibility.
- **Command palettes are highest‑frequency**: At 100+ daily invocations, they must never animate according to [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md).
- **Implementation is deletion**: Correct CSS for command palettes removes all transitions, keyframes, and animation properties.
- **Consistency across skills**: Both `find-animation-opportunities` and `improve-animations` enforce this rule through shared reference tables.

## Frequently Asked Questions

### Why not just use a fast 100ms animation?

Even brief animations accumulate psychological overhead when repeated frequently. The repository's research indicates that users perceive **any** delay in high‑frequency interactions as slowness. A 100ms animation played 200 times daily equals 20 seconds of enforced waiting — breaking the immediate feedback loop that makes keyboard shortcuts effective.

### Does this apply to all modal dialogs?

No — frequency classification depends on **actual usage patterns**, not component type. A rarely‑used settings modal might warrant gentle animation, while a developer's command palette or a power user's quick‑switcher does not. Audit your analytics to classify elements correctly using the [`skills/improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/AUDIT.md) workflow.

### What if my design system requires animations everywhere?

The `emilkowalski/skills` repository explicitly treats animation standards as **overrideable by user needs**, not visual consistency. High‑frequency utility trumps aesthetic uniformity. Consider creating a `utility-instant` variant in your design system that respects the frequency rules while maintaining other stylistic elements.

### How do I convince my team to remove beloved animations?

Reference the frequency data from your product analytics and cite the [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) table. Frame the decision as **performance optimization** rather than visual regression — removing animation improves perceived speed and reduces cognitive load for power users, directly impacting productivity metrics.