用途：为网页 UI 设计并实现以交互清晰度、性能和可访问性为目标的生产级动效，而非装饰性动画。用于构建或优化产品界面交互动效、在 CSS transition、keyframes、WAAPI 与 View Transitions API 之间选型、创建路由过渡或列表/详情共享元素过渡、定义动效令牌（时长、距离、缓动），以及评审动效质量、性能和无障碍。不适用于无交互或状态变化的静态内容、增加认知负担而不提升清晰度的场景，以及任何延迟都会影响可用性的即时状态更新。
主要能力：每个动效方案需满足连续性、反馈、层级、焦点引导中至少一个目标。机制选择上按需取轻：单元素状态变化用 CSS transition，多阶段或重复动效用 keyframes，需要命令式编排与播放控制用 WAAPI，跨 DOM 交换或路由变化用 View Transitions API。transform 策略上，需要可组合状态层、不同交互控制不同通道时用 translate:/rotate:/scale: 独立属性；变换顺序耦合或需要特定函数时用 transform 简写；translate3d() 仅在确有 3D/透视行为或已实测合成器收益时使用，避免当作通用 GPU 技巧。缓动默认用 cubic-bezier()，linear() 用于分段速度控制与品牌动效签名，建议 4-8 个控制点并令牌化复用。View Transitions 支持同文档与跨文档过渡，使用 view-transition-name 标记有意义的共享元素，关注 ::view-transition-old/new/group 伪元素，并做特性检测与降级。
使用方式：按输出契约产出五部分——Intent（动效驱动的感知或行为）、Motion Spec（时长、缓动令牌、距离、触发、受影响元素）、Implementation（具体 CSS/JS/View Transition 代码）、Accessibility Fallback（减弱动效与不支持 API 时的行为）、QA Checklist（性能、可用性与跨设备验证）。起始令牌与评审清单参见资料提及的参考文件。
性能与无障碍：优先动画 transform 和 opacity，避免为核心交互动画 top、left、width、height 等影响布局的属性；减少大表面长时间无限动画；谨慎使用 will-change 并及时移除；改动前后做性能分析。支持 @media (prefers-reduced-motion: reduce)，以淡入或即时状态变化替代大位移与缩放，保持反馈及时，并确保焦点顺序、焦点可见性与键盘行为正确。时长参考：微交互 120-180ms，组件过渡 180-260ms，结构/布局/路由过渡 240-420ms，退出通常快于进入。
限制：资料未提供具体支持的浏览器版本、安装命令、价格、平台信息或效果数据；部分细节需参考其 references 目录下的文件。