Pause and slow down CSS3 animations in Chrome Dev Tools

Visually debugging CSS animation just got a whole lot easier! We’ve needed better debugging tools (or any debugging tools, really) for CSS animation for ages. Now we’re starting to see some show up in browsers! The latest version of Canary now has controls to globally slow down and pause animation right from Dev Tools. It’s such a huge help for both designing and troubleshooting your animations.

To try these out for yourself in Canary, open up Dev Tools and go to Styles tab under Elements. Look for the play button in the far right and you’re off to the races.

Categories

Meta

Ken Snyder is a Software Craftsman specializing in PHP and JavaScript. Ken works in Salt Lake city for Right Intel.
He is the co-founder of UtahJS, an educational non-profit aimed at promoting JavaScript in Utah.