CSS Animation with GPU

CSS Animation with GPU

Presented at SF Web Performance Meetup, Nov 17, 2016.


A common advice to have a smooth CSS animation is to follow the best practice of using a restrictive set of CSS properties. In this talk, we will dive a bit deeper to understand how our favorite browser's rendering engine utilizes the graphics processing unit (GPU) to perform CSS animation, what we shall do to have the GPU compositing as efficient as possible, and some tools to help debugging and understanding any potential issues. Finally, we will apply what we learn to build a buttery smooth 3-D Cover Flow clone with the power of CSS and JavaScript.


Ariya Hidayat

November 17, 2016