Originally published at: http://www.sitepoint.com/introduction-css-will-change-property/
In this article, we’re going to take a look at the CSS
will-change property, what it is, when and how to use it, and how not to use it. There’s quite a bit of technical documentation available with regards to
will-change, so I’ll reference a lot of those resources throughout this article, and compile them in a list at the end. This article will serve as an overview of the important parts with some quick examples.
- The CPU, or the Central Processing Unit, is the piece of hardware that processes pretty much every computer operation. It’s otherwise known as the motherboard.
- The GPU, or the Graphics Processing Unit, is the piece of hardware associated with processing and rendering graphics. The GPU is designed to perform complex graphical computations and offloads some serious process weight from the CPU.
- Hardware acceleration is a general term for offloading CPU processes onto another dedicated piece of hardware. In the world of CSS transitions, transforms, and animations, it implies that we’re offloading the process onto the GPU, and hence speeding it up. This occurs by pushing the element to a layer of its own, where it can be rendered independently while undergoing its animation.
How does this improve the performance and quality of animations? Well, for starters, on WebKit-based browsers, we may often see a flicker when performing some CSS operations, namely 2D transforms and animations. In the past, we’ve gotten around this by tricking the browser a little. We would make the browser thing it was performing a 3D transform, thus offloading the operation onto the GPU. That’s because 3D transforms are automatically moved there. That leads us to some trickery like this:
-webkit-transform: translate3d(0, 0, 0);
There are some similar tricks, but for the most part, this covers us. However, this is a hack, and this is where the
will-change property will help us out greatly, when used correctly. Let’s investigate.
Continue reading this article on SitePoint