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?
6 Answers
Since Chrome 50 it's now finally possible to edit CSS keyframes.
https://twitter.com/ChromeDevTools/status/694966453376675840
-
-
3The animation editor allows you to edit only the animation-delay and animation-duration, but not keyframes.– GetFreeCommented May 19, 2016 at 11:52
-
Beautiful! I love that these are now editable as well as inspectable :)– Ky -Commented Mar 15, 2017 at 16:05
-
Could it be that this option is now gone? Can't find keyframe definitions either there or in the Animations tab. Commented Feb 9, 2022 at 12:02
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
-
1Interesting workaround. It works, but it's a bit of a hassle :P Any solutions for Opera, FF, Safari, or IE? That's all that's keeping me from accepting– Ky -Commented Oct 9, 2012 at 5:06
-
-
I believe it's the fastest way for extracting animation keyframes. Commented Aug 26, 2022 at 6:37
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 😄
-
2@MeltingDog I haven't had time to update the answer, but this was moved from an icon in the toolbar to a menu item in the secondary inspector thing (y'know that thing that appears when you hit escape?).– Ky -Commented Dec 11, 2016 at 19:30
-
Was finally able to update the answer 😅 Now it reflects reality– Ky -Commented Dec 31, 2020 at 22:25
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!
-
1Thanks for taking the time and effort to answer, but it didn't really answer my question.– Ky -Commented Feb 25, 2015 at 19:31
-
Yea... there's no way to actually see the keyframes in the inspector. So, I guess the final answer there is 'no'. I basically take my keyframe styles and put them into the main element and adjust them in inspector. That should work fine except for your 15 minute server delay. I think that's the bigger problem.– tim92109Commented Feb 26, 2015 at 19:42
Soon it will be, through the Chrome Dev Tools' Animation Timeline.
So far there's only this teaser video: https://www.youtube.com/watch?v=U9xfYbKxosI
-
Wow, that looks like everything i need and more! I can't wait!– Ky -Commented Jul 28, 2015 at 19:34
It took a while to get this on Chrome since most options have been moved or changed.
This is the way to get it on chrome in 4 steps illustrated on the screenshot below :
On Firefox (developer edition), there is a conspicuous Animation Tab as shown below:
