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?

Problem courtesy of: Supuhstar


Huzzah hoorah and hooray! It's completely possible today! Chrome Dev Tools added an Animation tab! Just open up the dev tools and click this little beauty: Chrome Animation Inspector icon! And a whole suite of cool tools are available for debugging animations :D

Google Chrome, open to with the animation inspector showing.

Solution courtesy of: Supuhstar


Since Chrome 50 it's now finally possible to edit CSS keyframes. enter image description here

Discussion courtesy of: GetFree

If you want even more control, download Chrome Canary (64bit required I believe). There is a little 'play' button and a time adjustment so you can slow down the animation and pause it whenever you want. Pretty cool!

illustrative screenshot Instructional video

Discussion courtesy of: tim92109

On Chrome:
- Ctrl+Shift+I
- Choose an element
- right column: click on the css-link (for example style.css:24)
- Now you can edit your css-file

- You can't edit css in the right column and in the css-file at the same time
- To retrigger the animation, remove -webkit-animation:... and add it back

Discussion courtesy of: Puyol

Soon it will be, through the Chrome Dev Tools' Animation Timeline.

So far there's only this teaser video:

Discussion courtesy of:

This recipe can be found in it's original form on Stack Over Flow.