Debug CSS animation with Chrome Devtools

css google-chrome debugging google-chrome-devtools transitions
FredVDH picture FredVDH · Oct 21, 2014 · Viewed 19.7k times · Source

Is it possible to view or debug the steps a single element takes when in a transition-css animation? I'm working with Chrome Dev Tools, but I'm pretty new at it. I googled it and saw something from the timeline, but I don't find the step by step things.

My animation starts at 0%, and goes to 100%, but there seems to be something strange around 50%, although the 50% step is not declared. That's why I would like to view what's going on.

Answer

user3638471 picture user3638471 · Jul 7, 2016

Yes it's possible.

It is possible to debug transitions and CSS animations with Chrome DevTools. Just click this button:

Image describing the location of the "Animations" tab activation button

Then, an "Animations" tab will open in the Console panel (you can open it by pressing Esc if you have DevTools focused - just click on DevTools to focus it):

enter image description here

Related questions

Firebug-like debugger for Google Chrome

Is there anything like Firebug that you can use within Google Chrome? Essential features I would like: Inspect HTML source (select elements, delete them, etc.) check CSS values (the built-in solution is weird, somehow)

Read More
How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More