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

css browser css-animations web-inspector
Ben Leggiero picture Ben Leggiero · Sep 6, 2012 · Viewed 19.8k times · Source

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?

Answer

Puyol picture Puyol · Oct 8, 2012

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

Notes:
- 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

Related questions

Hiding the scroll bar on an HTML page

Can CSS be used to hide the scroll bar? How would you do this?

Read More
How can I resize an image dynamically with CSS as the browser width/height changes?

I wonder how I could make an image resize along with the browser window, here is what I have done so far (or download the whole site in a ZIP). This works okay in Firefox, but it has problems in …

Read More
Disabling browser print options (headers, footers, margins) from page?

I have seen this question asked in a couple of different ways on SO and several other websites, but most of them are either too specific or out-of-date. I'm hoping someone can provide a definitive answer here without pandering to …

Read More