用途
animate 是一个设计动效审查与增强技能。它用于分析某个功能并策略性地添加动画与微交互，以帮助用户理解界面、获得操作反馈并产生愉悦感。
前置准备
该技能要求先调用 /impeccable，其中包含设计原则、反模式与上下文收集协议。必须先遵循该协议；如果尚不存在设计上下文，则必须先运行 /impeccable teach。此外还需收集：性能约束。
评估动效机会
分析动效在哪些地方能改善体验，识别以下静态区域：
- 缺失反馈：操作没有视觉确认（按钮点击、表单提交等）
- 生硬过渡：瞬间的状态变化显得突兀（显示/隐藏、页面加载、路由切换）
- 关系不清晰：空间或层级关系不明显
- 缺乏愉悦：功能可用但交互无趣
- 错失引导：可以引导注意力或解释行为的机会
同时需理解上下文：个性（活泼还是严肃、有活力还是平静）、性能预算（是否移动优先、页面是否复杂）、受众（是否对动效敏感、是否追求速度的高级用户）、什么最重要（一个主角动画还是多个微交互）。如果无法从代码库中推断清楚，应直接向用户询问。
关键要求：尊重 prefers-reduced-motion，始终为需要它的用户提供非动画替代方案。
规划动效策略
制定有目的的动效计划：
- 主角时刻：唯一的标志性动画是什么（页面加载、首屏、关键交互）
- 反馈层：哪些交互需要确认
- 过渡层：哪些状态变化需要平滑处理
- 愉悦层：在哪里可以制造惊喜与愉悦
重要原则：一个精心编排的体验胜过到处散落的动画，应聚焦高影响力时刻。
实现动效
按以下类别系统性地添加动效：
- 入场动画：页面加载编排（元素交错显现，100-150ms 延迟，淡入+滑动组合）、首屏戏剧性入场（缩放、视差或创意效果）、通过 intersection observer 实现的滚动触发内容显现、模态框/抽屉进入（滑动+淡入、背景淡入、焦点管理）
- 微交互：按钮反馈（悬停轻微缩放 1.02-1.05、颜色偏移、阴影增强；点击快速缩小再放大 0.95→1、涟漪效果；加载旋转或脉冲状态）、表单交互（输入聚焦的边框颜色过渡、轻微缩放或发光；验证时错误抖动、成功对勾、平滑颜色过渡；开关平滑滑动+颜色过渡 200-300ms；复选框/单选的勾选动画、涟漪；点赞/收藏的缩放+旋转、粒子效果、颜色过渡）
- 状态过渡：显示/隐藏用淡入+滑动而非瞬间切换（200-300ms）、展开/折叠的高度过渡与溢出处理及图标旋转、加载状态（骨架屏淡入、旋转动画、进度条）、成功/错误（颜色过渡、图标动画、轻微缩放脉冲）、启用/禁用（透明度过渡、光标变化）
- 导航与流程：页面过渡（路由间交叉淡入、共享元素过渡）、标签切换（滑动指示器、内容淡入/滑动）、轮播/滑块（平滑变换、吸附点、惯性）、滚动效果（视差层、带状态变化的粘性头部、滚动进度指示）
- 反馈与引导：悬停提示（工具提示淡入、光标变化、元素高亮）、拖放（抬起效果阴影+缩放、放置区高亮、平滑重定位）、复制/粘贴（粘贴时短暂高亮闪烁、「已复制」确认）、焦点流动（高亮表单或工作流的路径）
- 愉悦时刻：空状态（插画上的轻微浮动动画）、完成操作（彩带、对勾花式动画、成功庆祝）、彩蛋（用于探索的隐藏交互）、情境动画（天气效果、时段主题、季节元素）
技术实现
时长按用途区分：
- 100-150ms：即时反馈（按钮按下、开关）
- 200-300ms：状态变化（悬停、菜单打开）
- 300-500ms：布局变化（手风琴、模态框）
- 500-800ms：入场动画（页面加载）
缓动曲线（使用以下曲线，而非常规 CSS 默认值）：
/* 推荐 - 自然的减速 */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* 平滑、精致 */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* 略微更干脆 */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* 自信、果断 */
/* 避免 - 显得过时和俗气 */
/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
退出动画要快于入场动画，使用约为入场时长的 75%。
CSS 动画：适合简单、声明式动画——状态变化用 transitions，复杂序列用 @keyframes，只用 transform + opacity（GPU 加速）。
JavaScript 动画：适合复杂、交互式动画——Web Animations API 用于程序化控制，React 用 Framer Motion，复杂序列用 GSAP。
性能：使用 transform 和 opacity 实现 GPU 加速，避免布局属性；对已知高开销动画谨慎使用 will-change；减少重绘，适当使用 contain；监控 FPS，确保目标设备上达到 60fps。
无障碍：
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
绝对不要：使用 bounce 或 elastic 缓动曲线（显得过时，且会把注意力引向动画本身）；动画化布局属性（width、height、top、left），改用 transform；反馈类动画时长超过 500ms（会显得卡顿）；无目的地添加动画（每个动画都需要理由）；忽略 prefers-reduced-motion（这是无障碍违规）；给所有东西加动画（动画疲劳会让界面令人疲惫）；除非有意为之，否则在动画期间阻挡交互。
验证质量
彻底测试动画：在 60fps 下流畅，目标设备无卡顿；感觉自然，缓动曲线有机而非机械；时长适当，不太快（突兀）也不太慢（卡顿）；减弱动效模式正常工作，动画被恰当禁用或简化；不阻挡交互，用户可在动画期间或之后操作；增加价值，让界面更清晰或更令人愉悦。
核心理念：动效应增强理解并提供反馈，而不仅是装饰。有目的地赋予动效、尊重性能约束、始终考虑无障碍。优秀的动画是无形的——它只是让一切感觉恰到好处。