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:

Normal state

Hover:

Hover on state

How can I see the code behind this behavior?

score 4 · Answer 1 · answered Aug 23 '16 at 08:11

4

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

answered Aug 23 '16 at 08:11

suresh

220
2
5

score 3 · Answer 2 · answered Apr 12 '13 at 09:12

3

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.

answered Apr 12 '13 at 09:12

gvhuyssteen

292
7
18

Thanks but there are too many scripts in there. I just want to see the JavaScript for this element. – Jonas Apr 12 '13 at 09:39
Under the resources tab, there are a folder structure. Navigate the folders under "Frames" and you will come across a folder for "Scripts". In there you will find all of the Javascript files. – gvhuyssteen Apr 12 '13 at 09:43

score 2 · Answer 3 · answered Apr 12 '13 at 09:10

2

they will register a Hover event. a hover event can be added by various methods

in CSS
```
#someId:hover
{
 color:red;
}
```
in Jquery. $('#someid').hover();
via Unobtrusive jquery. they will attach events in unobtrusive manner

now check for the view source for this method. some where they will attach the events.

answered Apr 12 '13 at 09:10

Ravi Gadag

15,735
5
57
83

Thanks. I knew this. But is there any handy way to do it? I don't want to look into the scripts and _find_ the element and then check the corresponding codes. – Jonas Apr 12 '13 at 09:42

score 2 · Answer 4 · edited May 23 '17 at 12:23

2

There is no easy way with JavaScript as far as I know, but the following is my favorite answer and method when I'm working on css in Chrome., you can force states and inspect hover css etc.

https://stackoverflow.com/a/6778547/941896

edited May 23 '17 at 12:23

Community

1
1

answered Feb 23 '14 at 23:12

Christos Hrousis

707
4
16

How to inspect animation of an HTML element?

4 Answers4