How to inspect animation of an HTML element?

Question

I want to see the CSS transition or JavaScript/jQuery animation assigned to a particular element. How should I do it in Chrome DevTools or any other developer tools?

For instance, I visited a Google plus page and I noticed that when I hover on an image it grays out, zooms in and a close button appears in the corner.

Normal:

Hover:

How can I see the code behind this behavior?

Answer 1

Right click on the html elements in elements tab and select :hover options. Now you can see the hover css applied to the particular elements in right-hand side styles tab. Pls refer screen shot

Answer 2

For css transitions, its easy to spot when using the chrome dev tools. Just right click on the animation you want to view bring up the inspector. Change the state of the element to hover and you can view all the css for the hovered element.

For javascript, you can use the Resources tab in the chrome dev tools to view what scripts fires.. Just go through it.

For your effect.. its most probably Javascript.