技能说明
适合旋转、轨道、视差、滚动联动、跑马灯和轮播等连续动效的开发与排障。技能覆盖 transition-all、requestAnimationFrame、transform/opacity、React 逐帧更新和实际位置采样；会先测量再修改，不用构建成功代替性能验收。
关于此技能
帮助网页动画保持流畅，重点避免 CSS 过渡与 JavaScript 连续更新互相干扰，以及布局反复重排。
核心能力
选择唯一驱动方式
对连续运动明确使用纯 CSS 或纯 JavaScript，避免 transition-all 与逐帧更新同时作用于同一属性。
按帧与时间计算
用 requestAnimationFrame 和经过时间计算运动，页面切到后台或掉帧时仍保持正确速度。
优先合成层属性
连续动画优先使用 transform 和 opacity，谨慎使用 will-change，并通过实际几何位置排查漂移。
适用场景
解决动画卡顿
定位旋转、轨道、视差、滚动联动、跑马灯和轮播中的抖动、拖尾或明显延迟。
优化 React 动画
减少逐帧状态更新和不必要重渲染，必要时用引用直接更新节点。
验收动效实现
用性能分析和实际位置采样验证动画轨迹、帧间行为与响应式表现，而不是只看构建是否通过。
使用步骤
- 01
第一步：确认动画驱动
找出连续更新的属性和 CSS transition，先排查 transition-all、setInterval 与逐帧布局写入。
- 02
第二步：改为按帧合成
用 requestAnimationFrame 配合 performance.now()，把位置、缩放和透明度尽量放到 transform 与 opacity。
- 03
第三步：采样并复测
在代表性设备和页面状态下测量帧间位置、轨道半径和滚动表现，确认修复没有引入其他卡顿。
常见问题
所有动画都必须使用 Canvas 吗？+
不需要。对约 100 个以内的界面元素，技能建议优先使用 DOM 加 transform/opacity；只有成千上万元素或确实需要像素级绘制时再考虑 Canvas。
will-change 越多越好吗？+
不是。它会占用 GPU 内存，只应加在确实持续动画的元素上，过度使用反而可能拖慢其他滚动和页面。
为什么截图正常仍然要测位置？+
有些轨迹漂移、布局重排或掉帧只在连续运动中出现，技能建议结合实际几何位置和性能数据验证，而不是只依赖静态截图。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Claude Code · Codex · Cursor
已提供来源链接
命令可直接复制
2026/09/03
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
git clone https://github.com/swyxio/skills.git ~/Work/skills && ln -sf ~/Work/skills/web-animation-perf ~/.claude/skills/web-animation-perf