核心用法
本技能提供一套完整的Web动画性能优化方案，聚焦于仅使用GPU加速属性（transform和opacity）实现60fps流畅动画，同时强制要求无障碍支持。
关键实践：
- 属性选择：用
transform替代top/left/width/height，避免布局抖动（layout thrashing）和重排 - Reduced Motion：通过
prefers-reduced-motion媒体查询为约5%的前庭功能障碍用户提供替代方案，保留淡入淡出但禁用视差、弹跳等效果 - 缓动策略：进入用
ease-out（响应感）、离开用ease-in（加速离去）、内部移动用ease-in-out - 时长分级：微交互100-200ms、组件过渡200-300ms、页面切换300-500ms，超过500ms即显拖沓
- 框架适配：特别覆盖React生态陷阱——
AnimatePresence包裹条件渲染、列表使用稳定ID、避免transition: all的副作用
技术选型路径：CSS原生（0kb）→ AutoAnimate（3kb，列表/折叠面板）→ Motion（22kb，手势/物理）→ GSAP（60kb，复杂时间线），主张渐进增强。
显著优点
1. 性能优先：明确的GPU加速白名单，直接规避浏览器渲染管线瓶颈
2. 无障碍内置：将prefers-reduced-motion作为一级公民，而非事后补丁
3. 决策框架：提供从微交互到复杂编排的完整时长/缓动对照表，减少设计决策成本
4. 生态适配：针对React/Vue等框架的常见陷阱给出代码级解决方案
5. 体积敏感：库选型按字节分级，避免过度工程
潜在局限
- 场景局限：聚焦CSS/Web动画，未覆盖Canvas/WebGL高性能场景（游戏、数据可视化）
- 浏览器差异：部分旧版浏览器对
will-change和合成层优化支持不一致 - 手势局限：Motion库提及但未深入手势冲突处理、触摸与鼠标统一等复杂交互
- 测试缺失：未提供动画性能监控方案（如Chrome DevTools Layers面板使用指南）
适合人群
- 初级→中级前端开发者：建立动画性能正确认知，避开常见反模式
- 全栈开发者：快速查阅时长/缓动规范，保证基础可用性
- 设计系统维护者：作为动画Tokens的技术约束文档
常规风险
| 风险等级 | 具体风险 | 缓解措施 |
|---------|---------|---------|
| 中 | `will-change`滥用导致GPU内存泄漏 | 仅在动画前添加、结束后移除 |
| 高 | 忽略`prefers-reduced-motion`引发用户身体不适 | 强制作为代码审查Checklist项 |
| 中 | `transition: all`意外触发昂贵属性动画 | 显式声明动画属性白名单 |
| 低 | 库体积误估导致Bundle膨胀 | 严格遵循推荐选型路径 |
来源评估
内容源于现代浏览器渲染原理共识（Chrome DevTools文档、CSSWG规范）及主流动画库官方实践，技术建议与2024年Web性能最佳实践一致。