CSS animations, done properly, can elevate your site to another level. But creating these animations can be tricky without tools that provide fine control over them. What if there was a way to see exactly what’s happening at every step of your animation?
The DevTools feature of both Google Chrome and Firefox comes with the ability to inspect your animations. Learn how to use this feature to improve your own animations and reverse-engineer your favorite animations on the web.
Basic Animation Debugging With DevTools
Chrome’s DevTools is a great way todebug all aspects of your CSS, and more besides. Start with this simple example to understand how you may use it to inspect animations.
The code for these examples is available ina GitHub repository.
Define Animations With HTML and CSS
The following HTML renders a page with two elements: aand a. The page also imports a CSS file namedstyle.css:
To style both elements, create astyle.cssfile in the same folder as the HTML and add the following:
These styles create two components:
Note that the red box animates using theCSS @keyframe directive, while the button uses a transition. This lets you compare the two approaches using the browser’s DevTools.
Inspect Animations Using DevTools
To access theAnimationstab in Chrome DevTools:
This will open the animation drawer in the bottom section.
Any animations that occur on your page will show up here. If you refresh your page and hover on the button, the animations will show up under the animations tab.
The real power comes in when you click on one of these animations. For example, if you click on the box’s animation, you’ll see the browser presents the keyframes as follows:
The DevTools display all animations relating to the element you select. Since there’s just a single animation defined for the red box—rotateAndChangeColor—you’ll just see its details.
You can drag the line to the left to make the animation much quicker or drag it to the right to slow the animation down. You can also pause the animation at certain points by toggling the pause and play icons. The percentages at the top allow you to play the animation at a quarter of its normal speed and one-tenth of its speed respectively.
When you inspect the button transition, DevTools will show the individual properties of the transition: the color and background color.
This tool lets you manipulate your animation to see exactly how it’s working. You can use it totroubleshoot your websiteif there are any issues.
Advanced Animation Examples
Start by replacing the markup within your HTMLtag with the following markup:
Then replace all the styles in yourstyle.cssfile with this:
All theelements have themove-in-stepsanimation applied to them, which transitions the position and background color. In addition to that, each box has a different animation to control the number of steps it will take.
While the third box steadily slides to the right, the first two will move two steps at a time until they all reach the end of the screen (with the second box starting before the first box).
If you open theAnimationstab in DevTools and refresh the page, you’ll find all the information relating to these animations:
There are several elements that all animate over the same period. In this scenario, the background color and box position animate at the same time for all three boxes.
Another thing to note is the nodes on each animation line. When an animation occurs an infinite number of times, the nodes show where each repeat starts and ends in the animation.
The empty nodes are essentially the keyframes in your animation, while the solid, colored ones represent the start and end of the animation. You’ll have dark-colored nodes every time your animation starts over.
Finally, you can edit the animations using the DevTools, just as you can with any CSS property. All the changes you make using the animation UI will show up in the inline styles under theStylestab, and vice versa. This lets you make changes, test them out, and copy them over to your actual project.
Use Chrome DevTools to Debug Your CSS
The DevTools feature of Google Chrome is an awesome tool for debugging your CSS, including animations. It provides a detailed view of every transition and animation on your page, so you can see exactly what’s happening at every step.
As a web developer, you should be familiar with your browser’s DevTools function, or its equivalent.
