Inspect CSS Animation | Can I DevTools?

Can I DevTools?

It is like @CanIUse but for the browser devtools, created & curated by @pankajparashar. Get weekly tips & tricks for your favorite browser devtools by subscribing to the newsletter!

Ads via Carbon

CSS

Edit

Inspect CSS Animation

Can I inspect CSS animations & keyframes using the devtools?

Last Modified

6 months ago

Author

@pankajparashar

Test Live

via BrowserStack

Newsletter

tips-tricks-12

CHROME

Notes

Open Command Menu (Cmd+Shift+P or Ctrl+Shift+P) > Run "Show Animations" and press Enter.
Trigger the animation to record it on the timeline. Now you can use the buttons in the Controls section to adjust the replay speed of the animation.
Use the Timeline section to scrub the animation or jump to a specific point in animation. Use the Details section modify the timing & the delay of the animation.

References (2)