mcpField
I
implementation-debugging

implementation-debugging

github.com/dylantarre開発132493 回インストール43 週間前に更新
リポジトリ

implementation-debugging について

CSSやJavaScriptのアニメーション問題を調べる開発者向けガイドです。症状とアニメーション原則に沿った確認手順に加え、DevToolsでの調査方法と修正案をまとめています。

主な機能

  1. 01症状に応じたアニメーション診断
  2. 02原則に基づくデバッグ項目
  3. 03よくある不具合の原因と修正
  4. 04DevToolsの確認チェックリスト
  5. 05JavaScriptアニメーションイベントの記録

活用シーン

  1. 01アニメーションが始まらない原因の特定
  2. 02ちらつきや動作のカクつきの調査
  3. 03環境ごとの挙動の比較

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dylantarre/animation-principles --skill implementation-debugging

インストール後、Claude Code で/implementation-debuggingを入力して読み込まれたか確認します。

詳細

実装のデバッグ

Disneyの原則を診断の枠組みとして、アニメーションの問題をデバッグします。

問題の兆候

  • アニメーションがまったく再生されない
  • アニメーションは再生されるが、見た目がおかしい
  • 開発環境では動作するが、本番環境では動作しない
  • ブラウザーによって動作が異なる
  • アニメーションが不適切なタイミングで開始される -ちらつきや視覚的な不具合が発生する

原則別の診断

タイミング

問題：アニメーションのタイミングがずれている
デバッグ：時間の値を確認します。単位（ms と s）を確認します。CSS トランジションが上書きされていないか確認します。計算済みスタイルを調べます。

ストレート・アヘッドとポーズ・トゥ・ポーズ

問題：キーフレームが適用されない
デバッグ：すべてのキーフレームのパーセンテージを確認します。プロパティ名に誤字がないか確認します。値がアニメーション可能であることを確認します。

ステージング

問題：アニメーションが隠れている、または切り取られている
デバッグ：z-index、overflow、opacity を確認します。要素がビューポート内にあることを確認します。visibility: hidden が設定されていないか確認します。

ソリッド・ドローイング

問題：アニメーション中に視覚的な不具合が発生する
デバッグ：サブピクセルレンダリングの問題がないか確認します。GPU レイヤーを作成するために transform: translateZ(0) を追加します。レイアウトスラッシングが発生していないか確認します。

フォロースルー

問題：アニメーションが突然終了する、または誤った状態になる
デバッグ：animation-fill-mode を確認します。終了状態が CSS と一致することを確認します。競合するアニメーションがないか確認します。

よくあるバグ

症状考えられる原因修正方法
アニメーションしないプロパティがアニメーション可能ではないプロパティを直接変更するのではなく、transform を使用します
開始時にちらつく初期状態が設定されていない初期値を明示的に設定します
終了状態が誤っているフィルモードアニメーションに forwards を追加します
動きがぎくしゃくするレイアウトスラッシングtransform/opacity のみをアニメーションします
一度しか動作しないアニメーションがリセットされていないクラスを削除して再追加するか、JS を使用します

すぐに試せる修正

  1. DevTools の Animation パネルを確認する - タイムラインを確認します
  2. アニメーション可能なプロパティを確認する - すべての CSS プロパティがアニメーションするわけではありません
  3. animation-fill-mode: forwards を追加する - 終了状態を維持します
  4. GPU レイヤーを強制する - will-change: transform
  5. !important を確認する - アニメーションを上書きする可能性があります

トラブルシューティングのチェックリスト

  • アニメーションクラス／トリガーが適用されていますか？（DevTools の Elements）
  • プロパティはアニメーション可能ですか？（display は不可、opacity は可能です）
  • 計算済みスタイルに上書きがないか確認します
  • 要素は表示されていますか？（opacity、visibility、display、z-index）
  • 実行を妨げる JavaScript エラーはありますか？
  • DevTools の Animation パネルを確認します
  • シークレットモードでテストします（拡張機能なし）
  • 動作する環境と動作しない環境を比較します

コードパターン

// Debug: Log animation events
element.addEventListener('animationstart', (e) => {
  console.log('Animation started:', e.animationName);
});

element.addEventListener('animationend', (e) => {
  console.log('Animation ended:', e.animationName);
});

// Debug: Check computed animation
const styles = getComputedStyle(element);
console.log('Animation:', styles.animation);
console.log('Transition:', styles.transition);

// Reset animation
element.classList.remove('animate');
void element.offsetWidth; // Trigger reflow
element.classList.add('animate');

DevTools のヒント

  1. Elements > Styles：計算済みのアニメーション値を確認します
  2. Performance タブ：フレームを記録して分析します
  3. Animations パネル：速度を落とし、再生し、調べます
  4. Console：アニメーションイベントをログに記録します

コメント

Markdown 対応