Animation Inspector は、あらゆる Web ページで動作している CSS animation と transition を完全にコントロールできるツールです。すべての animation を一括で一時停止したり、コマ送りで確認できるまでスローにしたり、パフォーマンステストのために高速化したり、タイムラインを手動でスクラブしたり — ブラウザの DevTools を開かずに、単一のフローティングパネルからすべて操作できます。
CSS animation のデバッグは非常に困難なことで知られています。動きが速く、重なり合い、ブラウザの DevTools では animation プロパティを見つけるために computed styles を掘り下げなければなりません。Animation Inspector はこの問題を解決します。ページ上のすべての @keyframes animation と CSS transition を自動検出し、完全な設定（duration、easing、delay、iteration count）とともに一覧表示し、グローバルまたは animation ごとに機能する再生コントロールを提供します。ホバーエフェクトのガタつきをデバッグしている場合でも、ページ入場シーケンスのタイミングを微調整している場合でも、複雑な animation ライブラリの内部動作を理解しようとしている場合でも、このツールが制御権をあなたに与えます。
ワンクリックでページ上のすべての animation を即座に停止します。すべての animation は現在位置で停止し、先頭にリセットされません。再生ボタンをクリックすると、停止した場所から正確に再開します。肉眼ではとらえられない animation 途中の状態を確認するために不可欠です。
すべての animation の再生速度を同時に調整します。0.25x（四分の一速）、0.5x、1x（通常）、2x、4x から選択できます。0.25x で実行すると、200ms という高速な transition でも簡単に観察・デバッグできます。
ページ上のすべての CSS animation と transition が自動検出され、スクロール可能なリストに表示されます。各エントリには animation 名（または transition プロパティ）、duration、timing function（ease、linear、cubic-bezier）、delay、iteration count、および現在の実行状態が表示されます。
タイムラインスクラバーをドラッグして、animation をコマ単位で手動操作します。animation サイクルの 25%、50%、あるいは任意の時点で何が起きるかを正確に確認できます。ドラッグ中にページがリアルタイムで更新されます。
個々の animation を独立して一時停止、再生、速度調整できます。ページ上の他の動く要素に邪魔されることなく、単一の animation を分離してデバッグします。
リスト内の任意の animation をクリックして、完全な CSS 宣言を確認できます — @keyframes の定義、animation ショートハンドの内訳、計算された開始・終了状態、および適用されている要素が表示されます。
アニメーションインスペクター covers the following, organized by category:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-statetransition-propertytransition-durationtransition-timing-functiontransition-delayeaseease-inease-outease-in-outlinearcubic-bezier()steps()transformtransform-origintranslaterotatescaleskewanimation を 0.25x にスローダウンして、カクつきやジャンクが発生している箇所を正確に特定します。transform の代わりに width/height を animation させるレイアウトスラッシング、不正な easing、または同じ要素上の animation の競合が原因かどうかを確認できます。
タイムラインスクラビングを使って、cubic-bezier の easing カーブが実際にどのように見えるかを確認します。特定の割合での ease-in と ease-out の動作を比較します。動きが自然に感じられるまで値を調整して再生します。
印象的な animation を持つ Web サイト（ランディングページ、ポートフォリオサイト）にアクセスし、それらがどのように作られているかを正確に検査します。複雑なシーケンスを機能させる @keyframes の定義、タイミング値、要素のターゲティングを確認できます。
ホバーエフェクト、ローディングスピナー、スケルトンスクリーン、ページ transition がすべて正しく動作することを確認します。中間状態で一時停止して、animation 中の要素の重なり、不正な z-index、コンテンツのリフローなどの視覚的な不具合を確認します。
前庭障害を持つユーザーに問題を引き起こす可能性のある animation を特定します。すべての animation を一時停止して、prefers-reduced-motion が適切に考慮されているか、ページが完全に機能するかを確認します。
DevSuite Pro のフローティングドックを開き、Animation Inspector アイコンをクリックします。ツールがすぐにページをスキャンし、実行中のすべての CSS animation と transition を検出します。
ページ上で見つかったすべての animation を一覧表示するフローティングパネルが表示されます。各エントリには animation 名、duration、easing function、および現在実行中か一時停止中かが表示されます。カウントバッジには検出された animation の総数が示されます。
グローバルの Pause ボタンをクリックして、すべての animation を同時に停止します。要素は現在の animation 途中の状態のまま保持されるため、CSS プロパティの検査、スクリーンショットの撮影、または位置の比較が可能です。
速度セレクターを使用して animation を 0.25x までスローにして詳細に観察したり、4x に高速化して長い animation を素早くループさせたりします。速度変更は再起動なしに即座に適用されます。
タイムラインスクラバーを左右にドラッグして animation を手動でコマ送りします。各フレームの正確な状態を確認しながら、ページがリアルタイムで更新されます。ガタつきの発見や easing カーブの確認に最適です。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。