animate 是一个面向前端功能的动画增强技能，用于审查某个功能并为其添加有目的的动画、微交互和动效，从而改善可用性并带来愉悦感。其核心主张是：动效应当增强理解、提供反馈，而不仅仅是装饰。
用途 该技能用于分析一个功能，并策略性地添加动画与微交互，以增强理解、提供反馈并创造愉悦感。它强调“有目的地动画化”，反对无理由地到处添加动画。
强制准备步骤 在开始前必须收集上下文，包括目标受众（关键）、期望的使用场景（关键）、品牌个性/调性（活泼还是严肃、有活力还是平静）以及性能约束。应尝试从当前对话或代码库中获取这些信息。如果找不到确切信息而只能从现有设计与功能中推断，必须停止并调用 AskUserQuestionTool 确认推断是否正确；如果无法完全推断或置信度为中等及以下，也必须停止并先提出澄清问题以补全上下文。在得到答案前不得继续，因为猜测会导致不恰当或过度的动画。
此外，必须使用 frontend-design 技能获取设计原则与反模式，在其执行完成并了解所有该做与不该做之前不得继续。
评估动画机会 分析哪些地方加入动效可以改善体验，识别静态区域，例如：缺少反馈（按钮点击、表单提交等操作没有视觉确认）、生硬的过渡（显示/隐藏、页面加载、路由切换等瞬间状态变化显得突兀）、关系不清晰（空间或层级关系不明显）、缺少愉悦感（功能可用但交互无趣）、错失引导（引导注意力或解释行为的机会）。同时需要理解上下文：个性是什么（活泼还是严肃、有活力还是平静）、性能预算是什么（移动优先？复杂页面？）、受众是谁（对动效敏感的用户？追求速度的高级用户？）、最重要的是什么（一个主视觉动画还是许多微交互？）。如果这些在代码库中不清晰，必须停止并调用 AskUserQuestionTool 澄清。关键点：必须尊重 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。 无障碍：提供 prefers-reduced-motion 媒体查询，将 animation-duration、animation-iteration-count、transition-duration 降至 0.01ms 并限制迭代次数。
禁止事项 绝不使用 bounce 或 elastic 缓动曲线（显得过时且让注意力集中在动画本身）；绝不动画化布局属性（width、height、top、left），应改用 transform；反馈类动画时长绝不超过 500ms（会显得卡顿）；绝不无目的地动画化（每个动画都需要理由）；绝不忽略 prefers-reduced-motion（这是无障碍违规）；绝不动画化一切（动画疲劳会让界面令人疲惫）；除非有意为之，绝不在动画期间阻塞交互。
质量验证 彻底测试动画：在目标设备上以 60fps 流畅运行无卡顿；感觉自然，缓动曲线有机而非机械；时长合适，既不太快（突兀）也不太慢（卡顿）；减少动效设置有效，动画被适当禁用或简化；不阻塞，用户可在动画期间或之后交互；增加价值，让界面更清晰或更令人愉悦。
适用场景与限制 该技能适用于前端功能与界面的动效增强，尤其关注可用性反馈、状态过渡与愉悦感营造。其限制在于：必须先完成上下文收集与 frontend-design 技能调用，否则不得继续；对动效敏感用户必须提供非动画替代；具体的目标平台、框架支持范围、收费与价格等信息暂未提供。