どのブラウザーでも、アニメーションのパネルを開いている状態で画面を操作すると、発生したトランジション・アニメーションが自動的に記録されます。記録したアニメーションはもう一度ゆっくり再生したり、対象の要素やスタイルを調べたりすることもできます。 ChromeのAnimationsパネルの特徴 Chromeの場合、検出されたトランジションやアニメーションはトリガーが同じもので自動的にグループ化され、グループの単位で詳細を見たり再生したりが可能です。また、アニメーションのタイミングや長さをドラッグで調整する機能もあります。 Firefoxのアニメーションパネルの特徴 Firefoxのアニメーションパネルはインスペクターの一部になっているので、要素を絞り込んでこの要素に適用されているトランジション・アニメーションだけを表示できます。また、色のトランジション・アニメーションの場合、タイムラインが色の
![Chrome・Safari・Firefoxで比較!クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能(前編) - ICS MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/0a80d20dfb6cd7e3a315e9b24f5dcc09fc590da0/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F201119%2Fimages%2Feyecatch.png)