emilkowal-animations

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
name: emilkowal-animations
description: Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
---

# Emil Kowalski Animation Best Practices

Comprehensive animation guide for web interfaces based on Emil Kowalski's teachings, open-source libraries (Sonner, Vaul), and his [animations.dev](https://animations.dev) course. Contains 58 rules across 8 categories, prioritized by impact.

## When to Apply

Reference these guidelines when:
- Adding animations to React components
- Choosing easing curves or timing values
- Implementing gesture-based interactions (swipe, drag)
- Building toast notifications or drawer components
- Optimizing animation performance
- Ensuring animation accessibility
- Expressing any of the above with Tailwind CSS v4 utilities (see the `tw-` category)

## Rule Categories by Priority

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Easing Selection | CRITICAL | `ease-` |
| 2 | Timing & Duration | CRITICAL | `timing-` |
| 3 | Property Selection | HIGH | `props-` |
| 4 | Transform Techniques | HIGH | `transform-` |
| 5 | Interaction Patterns | MEDIUM-HIGH | `interact-` |
| 6 | Strategic Animation | MEDIUM | `strategy-` |
| 7 | Accessibility & Polish | MEDIUM | `polish-` |
| 8 | Tailwind v4 Utilities | MEDIUM | `tw-` |

## Quick Reference

### 1. Easing Selection (CRITICAL)

- [`ease-out-default`](references/ease-out-default.md) - Use ease-out as your default easing
- [`ease-custom-curves`](references/ease-custom-curves.md) - Use custom cubic-bezier over built-in CSS
- [`ease-in-out-onscreen`](references/ease-in-out-onscreen.md) - Use ease-in-out for on-screen movement
- [`ease-spring-natural`](references/ease-spring-natural.md) - Use spring animations for natural motion
- [`ease-spring-config`](references/ease-spring-config.md) - Configure springs with duration and bounce
- [`ease-ios-drawer`](references/ease-ios-drawer.md) - Use iOS-style easing for drawer components
- [`ease-context-matters`](references/ease-context-matters.md) - Match easing to animation context

### 2. Timing & Duration (CRITICAL)

- [`timing-300ms-max`](references/timing-300ms-max.md) - Keep UI animations under 300ms
- [`timing-faster-better`](references/timing-faster-better.md) - Faster animations improve perceived performance
- [`timing-asymmetric`](references/timing-asymmetric.md) - Use asymmetric timing for press and release
- [`timing-tooltip-delay`](references/timing-tooltip-delay.md) - Delay initial tooltips, instant subsequent ones
- [`timing-drawer-500ms`](references/timing-drawer-500ms.md) - Use 500ms duration for drawer animations

### 3. Property Selection (HIGH)

- [`props-transform-opacity`](references/props-transform-opacity.md) - Animate only transform and opacity
- [`props-hardware-accelerated`](references/props-hardware-accelerated.md) - Use hardware-accelerated animations when main thread is busy
- [`props-will-change`](references/props-will-change.md) - Use will-change to prevent 1px shift
- [`props-avoid-css-variables`](references/props-avoid-css-variables.md) - Avoid CSS variables for drag animations
- [`props-clip-path-performant`](references/props-clip-path-performant.md) - Use clip-path for layout-free reveals

### 4. Transform Techniques (HIGH)

- [`transform-scale-097`](references/transform-scale-097.md) - Scale buttons to 0.97 on press
- [`transform-never-scale-zero`](references/transform-never-scale-zero.md) - Never animate from scale(0)
- [`transform-percentage-translate`](references/transform-percentage-translate.md) - Use percentage values for translateY
- [`transform-origin-aware`](references/transform-origin-aware.md) - Make animations origin-aware
- [`transform-scale-children`](references/transform-scale-children.md) - Scale transforms affect children
- [`transform-3d-preserve`](r