UI Animation 是一个关于 UI 动效与动画的指南型技能，适用于设计、实现或评审动效、缓动、时序、减少动效行为以及 CSS 动画的场景。它给出核心规则、应动画的内容、空间与排序、缓动默认值、无障碍、性能等方面的规范，并指向 examples.md 提供片段与实用技巧。
核心规则
动画用于澄清因果关系或提供克制的愉悦感。交互保持快速（200-300ms；仅示意性动画可到 1s）。绝不给键盘交互加动画（方向键导航、快捷键响应、tab/focus）。优先使用 CSS；仅在需要时使用 WAAPI 或 JS。让动画可中断且由输入驱动。尊重 prefers-reduced-motion（减少或禁用）。
应动画的内容
对于移动与空间变化，只动画 transform 和 opacity。对于简单状态反馈，颜色、背景色和透明度过渡可以接受。绝不动画布局属性；绝不使用 transition: all。核心交互避免 filter 动画；若无法避免，保持模糊 <= 20px。SVG：在 <g> 包装器上应用 transform，并设置 transform-box: fill-box; transform-origin: center。主题切换期间禁用过渡。
空间与排序
将 transform-origin 设置在触发点。对于对话框/菜单，从大约 scale(0.85-0.9) 开始；避免 scale(0)。错开显示 <= 50ms。
缓动默认值
进入以及基于 transform 的悬停：cubic-bezier(0.22, 1, 0.36, 1)。移动：cubic-bezier(0.25, 1, 0.5, 1)。简单悬停颜色/背景/透明度：200ms ease。避免在 UI 中使用 ease-in（感觉缓慢）。
无障碍
如果使用了 transform，在 prefers-reduced-motion 中禁用它。通过 @media (hover: hover) and (pointer: fine) 在触屏设备上禁用悬停过渡。
性能
暂停屏幕外的循环动画。仅在剧烈运动期间且仅针对 transform/opacity 切换 will-change。在动画库中优先使用 transform 而非位置属性。不要使用 CSS 变量来动画拖拽手势。
参考
片段和实用技巧：examples.md。
工作流
从核心规则开始，然后从 examples.md 中挑选一个参考片段。保持动效功能性；尊重 prefers-reduced-motion。评审时，引用文件路径和行号并提出具体修复建议。