1实现原理 · 为什么它能做到
把卡顿归因到浏览器渲染管线：动 width/height/top/left/margin/box-shadow/filter 会每帧重跑 layout/paint，只有 transform 与 opacity 走合成器
skills/60fps-animation/SKILL.md
Eliminate the #1 cause of janky web animation: animating properties that force the browser to recalculate layout (reflow) or repaint on every frame. … Animating **`transform`** and **`opacity`** runs entirely on the compositor (often the GPU), skipping layout and paint, which is what makes animation smooth at 60/120fps.
注：不给风格建议，只给管线阶段归因；后文所有配方（伪元素阴影、FLIP、grid 折叠）都是这张映射表的落地。
给每个昂贵属性映射廉价等价物，并配套可抄代码：阴影改用伪元素 opacity、真尺寸/位移走 FLIP、height:auto 用 grid 0fr→1fr 或 interpolate-size
skills/60fps-animation/SKILL.md
| `box-shadow` | Paint | Animate `opacity` of a pseudo-element holding the shadow |
注：映射表加三段完整代码（`.card::after` 阴影、`flip()` 函数、`.wrapper{grid-template-rows:0fr}`），是可直接落地的替换方案，而非只说别动 width。
用先批量读、再批量写消除 layout thrashing，并给 will-change 的即时加/撤规则，避免合成层爆炸反伤性能
skills/60fps-animation/SKILL.md
For frame-synced work, read in a `requestAnimationFrame` callback and apply writes; libraries like fastdom formalize this read/write scheduling.
注：同节给 BAD/GOOD 对照；will-change 段明写 never blanket-apply to many elements，把常见的到处 translateZ(0) 反模式挡掉。
把性能变成可复核事实：冻结帧截图看视觉正确性 + DevTools Performance 或 CDP tracing 断言每帧无 Layout/Paint
skills/60fps-animation/SKILL.md
Or headless trace: `npx playwright screenshot` for the visual, plus a CDP/`tracing` capture, and assert no `Layout`/`Paint` events fire during the animation window.
注：验收分两支（CSS @keyframes 用 animationDelay+playState 冻结；WAAPI 用 anim.currentTime），使性能主张带证据而不是感觉。
2核心能力
01属性成本映射与昂贵动画的廉价替代（translate/scale/FLIP/伪元素阴影/图层交叉淡入）
02FLIP 动画布局变化（重排、换容器、真尺寸变化）
03height: auto 的两种动画路线（interpolate-size/calc-size 与 grid 0fr→1fr 兜底）
04will-change 的即时加/撤规则（防合成层数量爆炸）
05冻结帧交付契约与完成前清单（含 prefers-reduced-motion 门控）
06自带属性成本速查表（哪个属性触发哪个管线阶段）
3外部依赖
| 类型 | 依赖 |
|---|---|
| cli | npx / Playwright（宿主侧截图工具；SKILL.md 在 verify 段示范，非 skill 自带） |
| cli | scripts/seek-shot.sh + scripts/contact-sheet.sh（仓库根打包助手；9 个 skill 的 SKILL.md 都点名） |
| cli | ffmpeg（contact-sheet.sh 用 hstack 拼接触表） |
| api | 浏览器原生 API：Web Animations `element.animate()`、`getBoundingClientRect`、`interpolate-size`/`calc-size()`、DevTools Performance、CDP tracing |
| network | 无第三方库；正文只允许 deps via CDN if any（未点名任何域；产物期引用不判级） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 核心断言依赖 DevTools/CDP，纯截图验收者会漏掉性能这一半 — SKILL.md 把 compositor-only 列为必需验收项，但该步骤需要 Performance 录制或 tracing；若 agent 只跑 playwright screenshot，性能主张实际未被验证，文档也未把该缺口标为阻断。
- Packaged helper 路径以仓库根为基准，不是 skill 目录 — 单装本 skill 时 scripts/seek-shot.sh 相对路径不成立（见 second_pass 的 discrepancy 条），需自行把截图命令内联。
- references 文件尾部带 iart.ai 推广链与 utm 归因 — references/patterns-and-profiling.md 末行为 Built by **[iart.ai](https://iart.ai/?utm_source=github&utm_medium=readme&utm_campaign=web-animation-skills&utm_content=skill_footer&utm_term=60fps-animation)**——内容无害，但属品牌露出（同仓 9 个 reference 一致行为）。
- 少量浏览器支持声明无源码依据 — interpolate-size 的 Chrome 129+ 声明不可在源码内复核（见 second_pass），旧浏览器上必须回退 grid 方案。
风险提醒：绿色，放心使用。判级只依据 skill 自身目录（skills/60fps-animation/ = SKILL.md + 0 字节 README.md + references/patterns-and-profiling.md，find 全量核对，无隐藏文件、无 .sh/.py/.mjs、无二进制）：零脚本执行、零凭证读取、零执行期网络调用（全目录 token 扫描 fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval( 全部零命中）、零写盘。SKILL.md 唯一点名的宿主侧动作是 npx playwright screenshot（verify 段示例），属宿主截图工具而非本 skill 行为。交付物若引 CDN（正文只说 deps via CDN if any、未点名任何域）属产物期引用，按批4 口径不判级。
5第二遍独立确认
- [ok] 只动 transform/opacity 这条中心主张是否在源码内可执行为判据 — SKILL.md 给映射表 + 完整可抄代码 + layout/paint/composite 三阶段推理，并给 DevTools Perf 与 CDP tracing 两种可复核手段；references 的成本表逐属性标注触发阶段，主张与代码一致。
- [unlocatable] Chrome 129+ 的 interpolate-size 支持声明 — SKILL.md 写 interpolate-size: allow-keywords 为 Modern (Chrome 129+/supporting browsers)，但源码内无版本依据、无 caniuse 数据、无测试；只读侦查不运行浏览器，故按文档声明记录，不当作已核事实（正文同时给了 grid 0fr→1fr 的跨浏览器兜底，风险被降级）。
- [discrepancy] Packaged helper 的相对路径是否真的落在本 skill 目录内 — SKILL.md 的 verify 段写 scripts/seek-shot.sh anim.html 0 1.5 3，但 scripts/ 位于仓库根（/var/ytdown/skills-portal/spy-repos/iart-web-animation-skills/scripts/），skills/60fps-animation/ 内没有 scripts/ 目录。以 skill 目录为 cwd 照抄该命令会找不到文件；需按仓库根（或安装后的 pack 根）执行。对 pin commit 有效。
- [ok] 60fps/120fps 之外的量化主张是否有支撑 — 正文把 60/120fps 表述为合成器路径带来的结果，并把核对交给 DevTools 的 Frame Rendering Stats，未给出伪造基准数字；未发现夸大声明。
6结论
适合：适合：① 已有 CSS/JS 动画但卡顿掉帧，需要定位并改成合成器路径的前端；② 需要在重排、换容器、尺寸变化时做平滑过渡（卡片重排、列表进出、手风琴）的场景；③ 想要一份可在浏览器直接打开、可在 DevTools 里自证的性能示范页；④ 只允许平台能力、不能引第三方动画库的项目。
不适合：不适合：① 一开始就想用 GSAP/Lottie 编排复杂时间线的项目（应走同仓 gsap-web / lottie-animation）；② 需要时间线级 seek 编排或滚动驱动叙事（本 skill 不讲 ScrollTrigger）；③ 只要动画好看而不关心性能定位的诉求——本 skill 的验收线是性能与不拉花，不是视觉风格。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 60fps-animation.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentf8ffc2c3bcd223d0…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库iart-ai / iart-ai/web-animation-skills
原始 GitHubiart-ai/web-animation-skills ↗
Stars28
最近推送2026-06-22
本 skill commit
b6dba3eb75许可MIT（仓库根 LICENSE 为 MIT License, Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 的 license 字段同为 MIT）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。