# 动画性能 (animation-performance)

> 诊断 Web 动画掉帧的原因，通过仅合成属性和脱离主线程运行，让动画保持在帧预算内。

- 分类: [性能优化](https://www.myskills.tools/zh/categories/performance/)
- 来源: 社区 · Emil Kowalski
- 代码仓库: https://github.com/emilkowalski/skills/tree/main/skills/animation-performance (commit 2d22863)
- SKILL.md: https://github.com/emilkowalski/skills/blob/main/skills/animation-performance/SKILL.md
- 安装命令: `npx skills add emilkowalski/skills --skill animation-performance`
- 许可证: MIT
- 兼容工具: Any SKILL.md agent
- 权限: read-repo ✓, write-files ✓, shell ✗, network ✗
- 状态: 扫描通过
- 规则扫描无法覆盖所有风险，安装前请阅读此技能的 SKILL.md，确认权限后再使用。

## 核心规则

默认只对 transform 和 opacity 做动画，其他属性都需要理由。

## 执行阶段

1. **列出所有动画** — 列出范围内每个动画的驱动方式、属性和播放时机，并展开 transition: all 和 Motion 简写实际动画的属性。
2. **按序诊断** — 依次检查：动画属性、主线程是否繁忙、React 是否每帧重渲染、继承的 CSS 变量、超过 20px 的 blur，最后才考虑 will-change。
3. **录制确认** — 用 DevTools 的 Performance 和 Animations 面板确认，并在真实的中端手机上分析，而不是凭感觉判断。
4. **输出报告** — 每项发现给出文件位置、原因、修改前后以及是从代码确认还是需要设备录制，按成本排序后停止，仅在被要求时应用修复。

## 权限说明（据 SKILL.md 整理）

| 能力 | 是否需要 | 说明 |
|---|---|---|
| 文件写入 | 需要 | 默认只输出报告；用户要求时才修改动画相关代码。 |
| 命令执行 | 不需要 | 不运行命令；设备录制由用户在 DevTools 中完成。 |
| 网络外发 | 不需要 | 不需要网络访问。 |

## SKILL.md 头部信息（YAML）

```yaml
---
name: animation-performance
description: Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the layout/paint/composite pipeline, cheaper property swaps, CSS vs WAAPI vs requestAnimationFrame, Framer Motion's hardware-accelerated path, React re-rendering per frame, inherited CSS variable recalculation, blur cost, and when `will-change` actually helps. Use when an animation is janky, choppy, stutters, or drops frames; when choosing which property to animate; when deciding between CSS and JS animation on performance grounds; or when reaching for `will-change` or GPU layers. For choosing easing, duration, or whether to animate at all use animate; for reviewing motion as a whole use review-animations.
---
```

首页: https://www.myskills.tools/zh/ · URL: https://www.myskills.tools/zh/skills/animation-performance/