1仕組みと動作原理
カクつき（jank）の原因をブラウザのレンダリングパイプラインに帰属させる：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 |
マッピングテーブルに加え、3つの完全なコード（`.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.
検証は2系統に分かれ（CSS @keyframes は animationDelay+playState でフリーズ、WAAPI は anim.currentTime を使用）、パフォーマンスの主張を感覚ではなく客観的な証拠で裏付けます。
2コア機能
01プロパティコストのマッピングと高コストアニメーションの低コスト代替（translate/scale/FLIP/疑似要素シャドウ/レイヤークロスフェード）
02レイアウト変更に対応する FLIP アニメーション（リフロー、コンテナ変更、実際の寸法変化）
03height: auto の2種類のアニメーション手法（interpolate-size/calc-size および grid 0fr→1fr のフォールバック）
04will-change の即時付与/解除ルール（コンポジット層の急増防止）
05フリーズフレーム納品規約と完了前チェックリスト（prefers-reduced-motion の考慮を含む）
06プロパティコスト早見表の内包（各プロパティがトリガーするパイプラインステージの一覧）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| 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推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
作業ディレクトリを限定
管理者向け
操作ログを保持
判定根拠（ファイルパスと抜粋）
- 本地工作目录: ファイル I/O と成果物出力：本 skill ディレクトリ内へのディスク書き込みはゼロ。agent は出力規約に従い、ユーザープロジェクト内に自己完結型 .html 成果物を1つ書き出します
監査ノート： 。評価判定は skill 自身のディレクトリのみに基づきます（skills/60fps-animation/ = SKILL.md + 0 バイトの README.md + references/patterns-and-profiling.md、find による全量突合済み、隠しファイルなし、.sh/.py/.mjs なし、バイナリなし）：スクリプト実行ゼロ、認証情報の読み込みゼロ、実行時ネットワーク呼び出しゼロ（ディレクトリ全体のトークンスキャンで 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 を推奨）；② タイムライン単位のシーク制御やスクロール駆動の演出が必要なケース（本 skill では ScrollTrigger を扱いません）；③ パフォーマンスの最適化には関心がなく、見た目の良さだけを求める要望（本 skill の受け入れ基準は視覚的スタイルではなく、パフォーマンスと描画の歪み防止です）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload 60fps-animation.tar.gz
sha256:
Option B · Copy Guide for Agentf8ffc2c3bcd223d0…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit b6dba3eb75.