By Addy Osmani CHAPTER 6CSS animations expose a few different techniques for animating. These
include: transitions, which automatically animate if a specific CSS prop-
erty changes; transforms, which provide methods for altering the way an
element displays on screen (e.g. scaling, translation); and @keyframe-
based animation for defining more complex animations which change
over time. You should use CSS keyframe animations or transitions wherev-
er possible, as they are heavily optimized (often GPU-accelerated) and their
performance is almost universally good.
As Paul Irish has previously recommended^13 , should you absolutely
need to use JavaScript-based animation, use requestAnimationFrame. set-
Timeout and setInterval should be avoided like the plague. 2-D transforms
typically provide a smoother experience than relying on absolute position-
ing and will lead to quicker paint times and smoother overall animation.
Hardware (GPU) Acceleration
The next thing we’re going to look at is GPU acceleration. In the past,
browsers have relied pretty heavily on the CPU to render pages. This
involved two things: first, painting elements into a bunch of textures,
called layers; and second, compositing all of those layers together to the
final picture seen on screen. Over the past few years, however, we’ve found
that getting the GPU involved in the compositing process can lead to some
significant speeding up. The premise is that, while the textures are still
painted on the CPU, they can be uploaded to the GPU for compositing.
Assuming that all we do on future frames is move elements around (using
CSS transitions or animations) or change their opacity, we simply provide
these changes to the GPU and it takes care of the rest. We essentially avoid
having to give the GPU any new graphics; rather, we just ask it to move ex-
isting ones around. This is something that the GPU is exceptionally quick
at doing, thus improving performance overall.