Recently google added a nice new feature to the Chrome Inspector. If you’re not familiar with the inspector it is an indispensable tool for web development included with the Chrome browser (all browsers have one form or another of it). With the Chrome Inspector we now have the ability to inspect CSS animations. This can be helpful if you are trying o debug, or just want to check out how a cool animation was created.
For this quick demo let’s check out the site Animate.css (open the site in another tab to experiment) which is a really nice, easy to use css animation library you can download. It does most of the work for you by allowing you to just add classes to html elements to achieve simple animations.
If you inspect the main logo animation (right click on it select Inspect) this will open the inspector panel. Next choose the “more” dropdown (see screenshot) and go to “More tools”, from here choose Animations. This will open a new tab next to the Console Drawer, down near the bottom of the inspector normally.
The Animation Drawer consists of four regions.
- Controls: This section lets you adjust speed of animation or clear animation groups.
- Overview: This area shows the different animations you have on a page.
- Timeline: Pause or start animation, also allows you to navigate to any point.
- Details: Allows you to inspect and adjust the selected animation group.
When the Animate.css page loaded it captured the first animation and you can see it in the Overview section. If you don’t see it, try reloading the page. Now if you select the animation group in the Overview area you will see it’s Timeline and Details appear. You can adjust the speed by selecting one of the percentages in the Controls area and then hit play again to see it run in the window at different speeds. As you hover over each animation group you will also notice a preview modal popup showing the animation right in the inspector.
Play around with the different options, and you can try loading and inspecting a few different animations from the page via the dropdown!