CSS the will-change property

CSS animations are fast cause they are hardware accelerated.
There’s a trick available in webkit browsers that can even add more optimisations on top the “will-change” property.

The translateZ() or the translate3d() Hack

There’s a trick of pushing two dimensional animations into 3d animations, it’s worth mentioning that not all of our css animations are hardware accelerated, they execute from the browser’s rendering engine.

This trick works by pushing the 2d animations into null 3d animations and make the browser think it’s a 3d animation and need to be hardware accelerated.

transform: translate3d(0, 0, 0);

This is called composite layer technique, However this will in certain way increase the use of the Ram and impacts memory usage.

will-change to the rescue

The will-change property tells the browser to apply optimisations ahead of time on the element rendering which makes it useful when applying some heavy calculations.

A basic example of will-change

.cats-flying-on-the-screen {
will-change: transform; /* opacity, left, right …*/
}

The browser will be aware of the transform and will perfom the necessary calculations ahead which optimise the rendering.

Don’t spam the will-change

The webkit based browsers are already working very hard to optimise the display of the elements and the animations on the screen, overusing will-change won’t give you any benefits so apply it only when needed.

Give will-change sufficient time to work

Dont’ use it with :focus :hover :active etc..
The reason why is because it will take at least 200ms to set up the optimisations which will give you laggy interactions.

/* don’t do that */
a:hover {
will-change: opacity;
}

Remove will-change when changes are done

Because the optimizations browsers use for changing some properties are expensive, browsers remove them and revert to normal behavior as soon as they can in normal circumstances. However, will-change will generally override this behavior, maintaining the optimizations for much longer than the browser would otherwise do.

As such, whenever you add will-change to an element, especially via scripting, don’t forget to remove it after the element is done changing, so the browser can recover whatever resources the optimizations are claiming.

Support

The will-change is supported by webkit based browsers and yet in consideration by IE