核心用法
本 Skill 是专业级 Web 动画设计知识库，源自 Emil Kowalski 的 animations.dev 课程，专注于自然、有目的性的动效设计。核心能力包括：
1. 缓动函数决策系统：通过决策树快速选择正确缓动——入场用 ease-out、屏幕内移动用 ease-in-out、悬停用 ease、避免 linear 和 ease-in
2. 时长与频次控制：微交互 100-150ms、标准 UI 150-250ms、模态框 200-300ms；高频使用场景（100+次/天）应禁用动画
3. 工具链决策：布局变化/共享过渡/退出动画选 Framer Motion；简单悬停/性能敏感场景选 CSS；需弹簧物理/中断性选手势选 FM
4. Framer Motion 深度用法：layout 自动布局动画、layoutId 共享元素变形、AnimatePresence 模式控制、Motion Values 高性能手势追踪
5. 无障碍强制要求：所有动画必须适配 prefers-reduced-motion，推荐用 MotionConfig reducedMotion="user" 全局降级为透明度/背景色变化
显著优点
- 实战导向：直接提供 cubic-bezier 数值、代码片段、性能优化技巧，非纯理论
- 品牌思维：区分产品 UI（快速、克制）与营销页面（可更华丽），指导动画作为品牌表达
- 物理真实感：弹簧动画配置、动量中断机制，打造"有机"交互体验
- 决策工具丰富：包含工具选择决策树、缓动选择流程图、时长参考表等即查即用的结构化内容
潜在局限
- React 生态绑定：Framer Motion 相关内容占比较大，Vue/Svelte/原生 JS 开发者需自行转化
- CSS 动画深度有限：复杂 keyframes 编排、WAAPI (Web Animations API) 未深入覆盖
- 未覆盖 3D/WebGL：专注于 2D UI 动画，Three.js/R3F 等 3D 内容不在范围内
- 课程依赖：知识体系基于单一来源（animations.dev），虽权威但更新依赖课程迭代
适合人群
- React/Next.js 开发者需实现复杂布局动画
- 追求"精致感"的前端工程师，希望系统提升动效设计能力
- 需要快速判断"用什么工具/缓动"的技术决策者
- 关注无障碍、需实现
prefers-reduced-motion适配的团队
常规风险
- 性能陷阱：误用
height/width动画触发重排、CSS 变量在深层组件树中导致的拖拽卡顿 - 无障碍违规：未实现 reduced motion 支持，可能对前庭功能障碍用户造成不适
- 过度动画：高频功能添加动画导致用户疲劳（如 Raycast 案例）
- GPU/CPU 交接闪烁：未添加
will-change: transform导致的 1px 抖动