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?
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: And a whole suite of cool tools are available for debugging animations :D
This recipe can be found in it's original form on Stack Over Flow.