用途：把动效请求转成能通过严格评审的实现，重点是先判断该不该动，再决定用什么动。
主要能力：
- 频次门控：每天上百次的操作（快捷键、命令面板切换）不做动画；数十次/天只做近乎无感的反馈；偶尔出现（模态框、抽屉、Toast）用标准动画；罕见/首次（引导、成功、庆祝）才允许“惊喜预算”。键盘触发的动作直接排除动画。
- 目的命名：反馈、空间一致性、状态指示、避免突兀变化、解释说明、惊喜（仅限罕见层级）。说不出目的就不做。
- 工具选择（由轻到重）：可控状态的悬停/按压/颜色变化用 CSS transition；挂载入场且无 JS 状态用 @starting-style；页面繁忙加载时仍需平滑的预定动效用 CSS animation（主线程外运行）；需程序化控制又想要 CSS 性能用 WAAPI；弹簧、布局动画、退出动画、手势驱动值用 Motion。若需求实际是组件（Toast、抽屉、命令菜单、下拉），应转用 pick-ui-library，而非手写。
- 属性约束：只用 transform 与 opacity；clip-path 是获准的第四种；height 仅容忍于手风琴。禁止 scale(0) 入场，用 scale(0.9–0.97) 加 opacity: 0。触发器锚定的弹层把 transform-origin 设在触发器上，模态框保持居中。translate 用百分比而非硬编码像素。Motion 中写完整 transform 字符串，避免 x/y/scale 简写在负载下掉帧。
- 缓动与时长：入场/退出 ease-out，屏内移动 ease-in-out，悬停/变色 ease，持续运动 linear，默认 ease-out；UI 不用 ease-in。提供三组自定义曲线：--ease-out: cubic-bezier(0.23, 1, 0.32, 1)、--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1)、--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1)。时长参考：按钮按压 100–160ms，提示框/小弹层 125–200ms，下拉/选择 150–250ms，模态框/抽屉 200–500ms，营销解释可更长；UI 动画保持 300ms 内。拖拽惯性、可打断手势、装饰性鼠标跟随用弹簧，bounce 建议 0.1–0.3，多数 UI 避免回弹。
- 打断与退出：快速重复触发（Toast、开关）用过渡而非关键帧，过渡可从当前值重定向；手势用弹簧以保留速度；退出路径与进入对称；用户决策阶段慢、系统响应快。
- 减少动态与指针门控随动画一起交付：prefers-reduced-motion 下保留透明度/颜色变化、去掉位移；悬停动效包在 @media (hover: hover) and (pointer: fine) 内，避免触屏误触发。
使用方式：按顺序执行——先过频次门控，再命名目的，然后选最轻工具、选属性、定缓动与时长或弹簧、处理打断与退出、加减少动态与指针门控；最后写代码并简要说明门控结果、所用配方和需要凭感觉复核的点。常见组件（按钮按压、下拉、提示框、模态框、抽屉、Toast、手风琴、错峰、长按确认、标签指示器、滚动显现、拖拽关闭）可从配方文件起步。
适用场景：前端界面动效设计与实现、交互动效评审前的自查、需要兼顾性能与无障碍的动效落地。
限制：该技能只负责构建动画，不做代码库审计、差异评审、动效机会搜寻或 React Native 实现。所述曲线与库选择被视为有主张的起点，用户需求、项目约定、键盘替代方案与无障碍优先；示例代码为示意而非实测结果，需按已安装版本和官方文档核对 API；依赖安装与修改应限于授权任务。