How do you inspect CSS Animations and Transitions?

DevTools isn't just useful for quickly tweaking styles, debugging JS, or making it look like you have six figures in your checking account—you can also use it to play with animations.

Right now this feature is only available in Google Chrome and Firefox, but I'll make sure to update this once support comes to Safari and Edge!

Google Chrome

I'm sure you've heard of this browser. Just download the latest version to get started.

Modifying @keyframes

You can modify the actual @keyframes (meaning you can add percentages and change / add CSS properties) right in the Style pane. Just scroll down to the very bottom to find it:

 

Visually Changing the Iteration

You also have the option of tweaking your animation visually. You can add delays, slow down the animation, and increase the time between each animation state. This is great for understanding complex animations. Note that you have to trigger the animation once it's open. In this case, the animation was already running so I had to refresh the page:

 

Bezier Editor

You can also visually change the timing function of the animation. You can choose built-in functions or create your own.

 

Firefox

Firefox has pretty much the same features except the visual editor doesn't allow you to increase the duration of each iteration or add delays.

Here's a quick walkthrough on the latest version of Firefox:

 

Psst! There's a lot more to DevTools so check out the documentation for Chrome DevTools and the documentation for Firefox DevTools.

If you have any questions, send me an e-mail!

Did you enjoy this article? Don't miss my next post!

Comments