Search code examples
cssbrowsercss-animationsweb-inspector

Is it possible to inspect CSS3 animation keyframes with a browser inspector?


I have encountered a few sites, now, that take advantage of CSS3 keyframe-style animation, and decided to test it on my own sites. However, this leads me to a conundrum: Usually before I commit a CSS file to the site, I'll use the browser's inspector (Ctrl+Shift+I on Chrome, Opera, and FF; F12 in IE) to tweack and change the CSS locally to see what I like best. However, it appears there's no way to change the keyframes of a CSS3 animation with the browser inspector! This is an extreme hinderance to me, as it forces me to commit a CSS file every time I want to change any nuance of the animation, which also comes with up to a 15-minute delay from the server. Is there any way I can locally change CSS3 animation keyframes with the browser inspector?


Solution

  • Huzzah hoorah and hooray! It's completely possible today! Chrome Dev Tools added an Animation tool! Just open up the dev tools and click the "More Tools" button, then "Animations", and a whole suite of cool tools are available for debugging animations 😄

    Chrome dev tools 'More Tools' icon - three vertically-stacked dots which have the tooltip text 'More Tools'
    The menu which results from pressing the 'More Tools' button, showing the 'Animations' option selected

    Google Chrome, open to BenLeggiero.me with the animation inspector showing.