用途：为产品界面设计并实现动效，目标是保持状态间的空间连续性、传达层级与焦点、使用高性能属性、提供减少动效替代方案，并按需使用 View Transitions API 维持页面或状态连续感。适用于交互动效的搭建与优化、机制选型（CSS transition、keyframes、WAAPI、View Transitions API）、路由与列表/详情共享元素过渡、动效 token（时长、距离、缓动）定义、动效质量与性能/无障碍评审。不适用于无交互的静态内容、只会增加认知负担的动效，以及任何延迟都会损害可用性的即时状态更新。
主要能力：机制选择遵循最轻原则——单元素/组件状态变化用 CSS transition；多阶段或重复动效用 keyframes；需要程序化序列与播放控制用 WAAPI；跨 DOM 交换、路由或布局模式变化用 View Transitions API。transform 策略区分 translate/rotate/scale 单独属性与 transform 简写，translate3d() 仅在确有 3D/透视需求或实测有合成器收益时使用。缓动以 cubic-bezier() 为默认，linear() 用于分段速度控制与品牌动效签名，并建议 token 化复用。
使用方式：定义动效 token；按意图选用缓动 token；同文档过渡用 document.startViewTransition(() => update()) 包裹状态更新，跨文档过渡通过 @view-transition { navigation: auto; } 启用，并为有意义的共享元素设置 view-transition-name。输出需包含 Intent、Motion Spec、Implementation、Accessibility Fallback、QA Checklist 五部分。
限制：需支持 @media (prefers-reduced-motion: reduce)，减少动效时以淡入或即时状态切换替代大位移/缩放；不得在等待过渡时阻塞核心交互；避免动画布局属性；will-change 慎用；使用前应做性能分析。具体 token 文件与配方见 references 目录。