patrick / articles

Inspecting animations in Firefox

CSS animations and transitions are awesome, but they’re also hard to get right. You want your animations to be sequenced a certain way, to last the right amount of time, and to progress at the right pace.

That’s where tooling comes in. What if you could slow down, rewind, or pause your animations anywhere, so that you could inspect the animated elements more easily?

That’s what we started to work on a while back in the Firefox DevTools. In fact, I already mentioned an earlier version of the animation inspector tool previously (by the way, this article also mentions some of the other ways you can inspect and edit animations in Firefox DevTools, like editing keyframe rules, or visually changing the cubic-bezier timing function, so go check that out).

I now want to introduce a new version of the tool that’s going to see the light in Firefox 43:

The main features of this version are:

There’s so much more to do however, this is still an early version of the tool. Don’t hesitate to file bugs if you see anything weird. Here are some of the things we’d like to add:

If you want to follow the development, or even contribute, here is the main bug.