Chapter 5: Optimizing CSS: Tweaking Animation Performance with DevTools

by Maria Antonietta Perna

CSS animations are known to be super performant. Although this is the case for simple animations on a few elements, if you didn't code your animations with performance in mind and add more complexity, website users will soon take notice and possibly get annoyed.

In this article, I introduce some useful browser DevTools features that will enable you to check what happens under the hood when animating with CSS. This way, when an animation looks a bit choppy, you'll have a better idea why and what you can do to fix it.

Developer Tools for CSS Performance

Your animations need to hit 60 fps (frames per second) to run fluidly in the browser. The lower ...

Get Front-end Performance now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.