職場では、さまざまなアニメーション効果を実装する Web サイトに遭遇します。興味のある学生は立ち止まって、このアニメーションの実装計画について考えます。複雑なアニメーションに遭遇した場合は、ブラウザーに付属のAnimationアニメーション デバッグ ツールを使用して、アニメーションを再現できます。アニメーションの実行プロセス
1. まずF12コンソールを開き、右側の 3 つの点をクリックして見つけMore Tools、Animations[ツール]をクリックします。
2. アニメーションを実行した後、アニメーションをグループ化します。
ここでは、アニメーションのグループ化が表示されており、マウスを移動すると、アニメーションが繰り返し実行されるプロセスが表示されます。
ここでは、さまざまなアニメーションのグループが表示され、アニメーションのグループをクリックすると、アニメーションの遅延時間、実行時間、アニメーション名などが表示され、再生を一時停止したり、再生時間、遅延時間、その他の設定を変更したりできます。左側のボックスをクリックすると、アニメーションを実行している要素にジャンプし、アニメーションの実行コードを確認できます。
以上がアニメーションのデバッグ処理です