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 the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
