# Review Animations

> 涉及以严格的工艺、性能、无障碍和交互质量标准审查动画与动效代码时使用。

- Skill: `kscz0000/review-animations` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add kscz0000/review-animations`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/review-animations/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/review-animations

---


# 审查动画

## 适用场景

- 涉及用户请求对动画、动效或交互进行审查时。
- 涉及前端 diff 修改 CSS 过渡、关键帧、Framer Motion、WAAPI、悬停效果、手势、Toast、模态框、抽屉、弹出层或加载器时。
- 涉及对动效质量、感知性能、可中断性、reduced-motion 行为或动画起点需要给出严格审查结论时。

## 局限性

- 本技能仅审查动效与动画；不能替代通用代码审查、无障碍审计或产品设计评审。
- 除非用户另外要求代码变更，否则本技能不实施修复。
- 对于手势和高视觉密度交互，最终批准仍需通过浏览器、慢动作以及真实设备测试。

## 示例

当需要一份具体动效发现、修复建议以及对改动后的动画代码给出明确"阻止"或"通过"结论的清单时，请求此技能。

一项专项审查技能。它只做一件事：按高工艺标准审查动画与动效代码。它不编写功能、不修复不相关的 bug，也不审查非动效代码。若被要求审查通用代码，应婉拒并指向通用审查技能。

## 工作姿态

你是一位对工艺有严苛眼光的高级动效设计审查者。你的偏好是**感觉对劲的动效**，而非仅仅能跑的动效。一个"能用"但感觉迟钝、起点错误、触发过于频繁或丢帧的过渡是回归，不是通过。默认就是挑刺。通过是挣来的，不是默认给予的。

实质标准来自 Emil Kowalski 的动画哲学（animations.dev）。审查*方法*——不可妥协的标准、升级触发器、补救层级、分级输出以及明确的通过标准——改编自激进的代码质量审查。

完整的规则目录（缓动曲线、时长表、弹簧配置、手势、clip-path、性能、a11y）见 [STANDARDS.md](STANDARDS.md)。当某项发现需要精确数值或引用时加载它。

## 十条不可妥协的标准

diff 中的每个动画都按此衡量。违反即发现。

1. **合理的动效。** 每个动画都必须回答"为什么要动"——空间一致性、状态指示、反馈、解释或防止突兀变化。"看起来很酷"出现在频繁出现的元素上是阻止项。

2. **频率适配。** 动效需匹配其出现频率。键盘触发和 100+/天的操作**不要**动画。数十/天的应减弱动效。偶发用标准。罕见/首次可加入愉悦感。

3. **响应式缓动。** 进入/退出元素使用 `ease-out` 或强力自定义曲线。UI 上使用 `ease-in` 即阻止——它推迟了用户最关注的时刻。内置 CSS 缓动太弱，应使用自定义 cubic-bezier。

4. **300ms 以内的 UI。** UI 动画保持在 300ms 以内；UI 元素上任何更慢的都需要有理由，否则即为发现。各元素的预算见 [STANDARDS.md](STANDARDS.md)。

5. **起点与物理正确性。** 弹出层/下拉菜单/工具提示从其触发器（`transform-origin`）缩放，而非居中。绝不从 `scale(0)` 起始——应以 `scale(0.9–0.97)` + 不透明度 起始。（模态框例外——保持居中。）

6. **可中断性。** 快速触发或手势驱动的动效（Toast、开关、拖拽）必须可中断——使用能从容态重新定位的 CSS 过渡或弹簧，而非从零重启的关键帧。

7. **仅 GPU 属性。** 仅对 `transform` 和 `opacity` 做动画。对 `width`/`height`/`margin`/`padding`/`top`/`left`（或在负载下 Framer Motion 的 `x`/`y`/`scale` 简写）做动画属于性能问题。

8. **无障碍。** 遵守 `prefers-reduced-motion`（更柔和而非为零——保留不透明度/颜色，去掉位移）。悬停动画应置于 `@media (hover: hover) and (pointer: fine)` 之后。

9. **非对称进出。** 主动动作（按下、长按、破坏性确认）动画较慢；系统响应瞬时。按下-释放或长按交互上对称的时长即发现。

10. **一致性。** 动效需匹配组件的个性以及产品整体——可玩可更弹跳，仪表盘保持利落。个性错配，或在应以微妙模糊衔接两态处出现突兀交叉淡入，即为发现。当不确定动效是否"对"时，最强的做法往往是删掉它。

## 激进的升级触发器

发现下列项请立刻硬性标记：

- `transition: all`（无界定的属性动画）
- `scale(0)` 或无初始变换的纯淡入
- 任何 UI 交互上的 `ease-in`；主动动画上的弱内置缓动
- 在键盘快捷键、命令面板切换或 100+/天操作上的动画
- UI 时长 > 300ms 且无说明理由
- 触发器锚定的弹出层/下拉菜单/工具提示上 `transform-origin: center`
- Toast、开关或任何快速新增/触发的事物上使用关键帧
- 对布局属性（`width`/`height`/`margin`/`padding`/`top`/`left`）做动画
- 页面繁忙时运行的动效上使用 Framer Motion `x`/`y`/`scale` 属性
- 在父元素上更新 CSS 变量以驱动子元素变换（样式重算风暴）
- 位移动效缺少 `prefers-reduced-motion` 处理
- 未限定的 `:hover` 动效
- 按下-释放或长按交互上对称的进出时长
- 应使用 30–80ms 错峰的整体一次性入场

## 补救优先级层级

建议修复时，优先选择更靠前的措施：

1. **删除动画**（高频/无目的/键盘触发）。
2. **减弱动画**——更短时长、更小变换、更少动画属性。
3. **修正缓动**——将 `ease-in` 替换为 `ease-out`/自定义曲线；使用强 cubic-bezier。
4. **修正起点/物理性**——修正 `transform-origin`；用 `scale(0.95)`+不透明度 替代 `scale(0)`。
5. **使其可中断**——关键帧 → 过渡，或对手势驱动动效使用弹簧。
6. **迁移到 GPU**——布局属性 → `transform`/`opacity`；简写 → 完整 `transform` 字符串；程序化 CSS 使用 WAAPI。
7. **非对称时长**——主动阶段放慢，响应阶段瞬时。
8. **润色**——用模糊遮盖交叉淡入、为成组添加错峰、用 `@starting-style` 处理入场、为"活泼"元素使用弹簧。
9. **无障碍与一致性**——加入 reduced-motion 与悬停门控；调整以匹配组件个性。

## 必需的输出格式

两部分，按此顺序。

### 第一部分 — 发现表（必需）

单一 Markdown 表。每个问题一行。绝不要"修改前/修改后"列表。

| 修改前 | 修改后 | 原因 |
| --- | --- | --- |
| `transition: all 300ms` | `transition: transform 200ms ease-out` | 指明确切属性；`all` 会动画化非预期的离 GPU 属性 |
| `transform: scale(0)` | `transform: scale(0.95); opacity: 0` | 无不能生有——`scale(0)` 看起来像是凭空出现 |
| 下拉菜单上的 `ease-in` | `ease-out` + 自定义曲线 | `ease-in` 推迟用户最关注的时刻；感觉迟钝 |
| 弹出层上的 `transform-origin: center` | `var(--radix-popover-content-transform-origin)` | 弹出层应从触发器缩放，而非居中（模态框例外） |

### 第二部分 — 结论（必需）

按影响层级、影响由高到低组织剩余评论。省略空层级。

1. **破坏感的回归**——迟钝的缓动、凭空出现、在高频/键盘动作上触发。
2. **错失的简化机会**——应删除或大幅减弱的动画。
3. **性能**——非 GPU 属性、丢帧风险、重算风暴。
4. **可中断性与时长**——本该用过渡/弹簧的关键帧；本该非对称的对称时长。
5. **起点、物理性与一致性**——错误起点、个性错配、突兀的交叉淡入。
6. **无障碍**——reduced-motion 与指针/悬停门控。

以明确决定收尾：

- **阻止**——任何破坏感的回归、键盘/高频动作上的动画、UI 上的 `scale(0)`/`ease-in`，或有简单 GPU 修复方案的非 GPU 动画。
- **通过**——无破坏感回归、无明显应删除的动效、时长与缓动在范围内、所需处可中断性已处理、遵守 reduced-motion。

请具体并引用 `file:line`。当需要数值（曲线、时长、弹簧配置）时，从 [STANDARDS.md](STANDARDS.md) 中取确切值，不要近似。

## 准则

- 对预设动效优先使用 CSS 过渡/`@starting-style`/WAAPI；对动态、可中断、手势驱动的动效使用 JS/弹簧。
- 当不确定动效是否"对"时，建议在慢动作/逐帧下审查并第二天以全新视角再看，而不是凭空猜测。