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!
I'm sure you've heard of this browser. Just download the latest version to get started.
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:
You can also visually change the timing function of the animation. You can choose built-in functions or create your own.
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:
If you have any questions, send me an e-mail!