how to inspect CSS animations in chrome dev tool

user_12383492 0
Viewed 77

Basically All the time I need to inspect how my CSS animation work.so is there way to inspect CSS animation in chrome dev tools?

css-animations google-chrome-devtools
2 Answers

Chromium (Chrome/Edge/Opera):

  • Open Command Menu (Cmd+Shift+P or Ctrl+Shift+P) > Run "Show Animations" and press Enter. This will open the Animations drawer. Trigger the animation to record it on the timeline. The Animations drawer is divided into 4 sections,
    1. Controls: From here, you can clear all currently captured animation groups, or change the speed of the currently selected animation group.
    2. Overview: Select an animation group here to inspect and modify it in the Details pane.
    3. Timeline: Pause and start an animation from here, or jump to a specific point in the animation.
    4. Details: Inspect and modify the currently selected animation group like adding delay or changing timing duration.

enter image description here

Firefox:

  1. Inspect the element that uses CSS animations. Open the Animations pane from the right sidebar. Trigger the animation to view a synchronized timeline in the pane. Use the draggable widget to scrub through the timeline or jump to a specific point. You can also change the playback speed and do much more.

Safari:

  1. Open devtools > Open the "Timelines" tab > Ensure that "Media and Animations" is enabled in the left panel. Now reload the page or trigger the animation to see the timeline in the bottom panel.

More info:

user_9034460

There are two ways to open the Animations tab:

  1. Customize and control DevTools > More tools > Animations.
  2. Open the Command Menu by pressing one of the following: On macOS: Command + Option + C. On Windows, Linux, or ChromeOS: Control + Shift + C. Then start typing Show Animations and select the corresponding Drawer panel.

or

Read the article and hopefully find a great solution:

user_147581490
Related