用途
animate 是一个「构建型」技能，只做一件事：把对动效的需求转化为经得起严格评审的实现。它不用于审计代码库、评审 diff、搜寻可加动画的位置，也不用于为 React Native 构建。
其标准是 Emil Kowalski 的动画理念，与 review-animations 执行的标准一致，目标是写出一次就能通过该评审的代码。
核心立场
构建者以资深设计工程师自居，亲自实现动画。它列出两种失败模式，其中第一种更严重：
- 给本不该有动画的东西加上动画。技能中的门控步骤有时就是为了产出零行代码，这是成功而非回避。
- 给对的东西用了错的配方——入场用 ease-in、scale(0)、给 toast 用关键帧、时长让下拉菜单显得迟钝。
技能要求：不要把动效选项列成菜单。要做判断、用一句话说明理由、写代码。
构建顺序
1. 这东西到底该不该有动画
按使用频率判断：每天 100 次以上（键盘快捷键、命令面板开关）完全不做动画，到此为止；每天数十次（悬停效果、列表导航）只做近乎察觉不到的快而微的效果，或不作；偶发（模态框、抽屉、toast）使用标准动画；罕见/首次（引导、成功、庆祝）是「惊喜预算」所在。键盘触发的操作属于失格条件，不是可商量的判断。若请求未通过该门控，应直说并不要写动画，改提供非动效方案（即时状态切换、静态提示）。
2. 目的是什么
必须能用以下词之一命名：反馈、空间一致性、状态指示、防止突兀变化、解释说明（仅营销/引导）、惊喜（仅限罕见/首次档）。命名不了就不要构建。频繁出现的元素上「看起来酷」是停止的理由。同时检查功能：用户正在阅读或操作的数据不应为样式而移动。
3. 选工具——能用的最省方案
按需自上而下选，停在第一个合适的：悬停、按下、颜色、用类或属性控制的状态切换用 CSS transition；挂载入场动画且无 JS 状态用 CSS @starting-style；预先确定的动作且页面繁忙加载时仍需流畅用 CSS animation（跑在主线程之外）；需要程序化控制又要 CSS 性能且不想引库用 WAAPI；弹簧、布局动画、退出动画、手势驱动值用 Motion (motion.dev)。CSS 动画在负载下优于 JS。若任务需要的是组件而非动画（toast、抽屉、命令菜单、下拉），应停下并调用 pick-ui-library。
4. 选属性
只用 transform 和 opacity，它们跳过布局与绘制并跑在 GPU 上；width/height/margin/padding/top/left 会触发全部三阶段。clip-path 是获准的第四种。绝不用 scale(0)，从 scale(0.9–0.97) + opacity: 0 起步。弹出层、下拉、菜单、工具提示的 transform-origin 设在触发器处（Base UI 中为 var(--transform-origin)）；模态框例外，保持居中。translate() 中的百分比相对元素自身尺寸。在 Motion 中要使用完整 transform 字符串，x/y/scale 简写不是硬件加速的。
5. 缓动与时长——或用弹簧
缓动按决策顺序：入场或退场用 ease-out；屏幕上移动/变形用 ease-in-out；悬停/颜色变化用 ease；匀速运动用 linear；默认为 ease-out。UI 中绝不使用 ease-in。内置 CSS 缓动太弱，技能给出三条曲线：--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)。需要其他曲线应从 easing.dev 或 easings.co 取，不要手写。时长：按钮按下反馈 100–160ms；工具提示、小弹层 125–200ms；下拉、选择 150–250ms；模态框、抽屉 200–500ms；营销/解释可更长。UI 动画保持在 300ms 以内。当动作是带惯性的拖拽、需要「有生命感」的元素、用户可中断或反转的手势、装饰性鼠标跟踪时改用弹簧：{ type: "spring", duration: 0.5, bounce: 0.2 } 或 { type: "spring", mass: 1, stiffness: 100, damping: 10 }，bounce 保持在 0.1–0.3。
6. 中断与退出
对快速触发的元素用过渡而非关键帧；手势用弹簧以携带速度穿过中断；退出方式与进入一致；在用户决策处使用非对称时序。
7. 减弱动态与指针门控
随动画一同交付：@media (prefers-reduced-motion: reduce) 保留透明度/颜色、去掉基于 transform 的运动；@media (hover: hover) and (pointer: fine) 防止触屏误触悬停。减弱动态意味着更少更温和的动画，而不是零。
配方
常见场景（按钮按下、下拉、工具提示、模态框、抽屉、toast、手风琴、交错、长按确认、标签指示器、滚动显现、拖拽关闭）参见 RECIPES.md，请求匹配时应从配方起步而非空白文件。
绝不交付
提交前自检，以下每项在评审中都是自动拦阻：transition: all、scale(0) 入场、UI 元素用 ease-in、刻意动画用内置 ease-out、键盘快捷键或每日 100+ 次操作加动画、无理由超过 300ms 的 UI 时长、触发器锚定弹出层的 transform-origin: center、给 toast/开关/快速触发元素用关键帧、动画 width/height/margin/padding/top/left、负载下用 Motion x/y/scale、未门控的 :hover 运动、缺失 prefers-reduced-motion、所有元素同时入场。均有对应的替代做法。
输出
先写代码。然后用最多几行说明：门控结果（频率档与命名目的，若请求中有被拒绝的部分要说明原因）；配方（工具、属性、曲线、时长或弹簧配置，各一行）；需要凭感觉检查的部分（若结果取决于从代码看不出的手感，应指出检查方式：以 2–5 倍时长播放或使用 DevTools 动画检查器逐帧步进、在真机上测试手势、次日用全新眼光再看）。代码才是交付物，不要把输出填充成报告。
语气
有主见且简短。当诚实答案是「这不该有动画」时给出它；当手感确实无法从代码判定时，直说而非猜测数值。