Chromium Animation DevTools

When building complex animations, it can sometimes be difficult to fine tune animations, especially if they complete very quickly. Adjusting the duration works, but that becomes a pain when you start building multi-phase animations or when your animation includes several different sets of keyframes.

Thankfully, Chromium-based browsers have an Animations panel in DevTools that allows you to easily slow down all animations on the page to 25% or 10% making it effortless to slow animations for fine grained testing and tuning. It also will take screenshots as the animation progresses and show details on keyframes to give you more insights into your animations.

Checkout the Chrome DevTools article for a much deeper dive into all the awesome capabilities of the animations panel!