#will-change

[kazu69]

[dragoni]

only works with WebKit and Firefox Nightly builds

The Old: The translateZ() (or translate3d()) Hack

For quite some time now, we’ve been using what has been known as the translateZ() (ortranslate3d()) hack (sometimes also called the null transform hack) to trick the browser into pushing our animations and transforms into hardware acceleration. We’ve been doing that by adding a simple 3D transformation to an element that will not be transforming in three-dimensional space. For example, an element that’s animated in two-dimensional space can be hardware-accelerated by adding this simple rule to it:

transform: translate3d(0, 0, 0); ...

The New: The Glorious will-change Property

The will-change property allows you to inform the browser ahead of time of what kinds of changes you are likely to make to an element, so that it can set up the appropriate optimizations before they’re needed, therefore avoiding a non-trivial start-up cost which can have a negative effect on the responsiveness of a page. The elements can be changed and rendered faster, and the page will be able to update snappily, resulting in a smoother experience.

...

Using will-change, hinting to the browser about an upcoming transformation can be as simple as adding this rule to the element that you’re expecting to be transformed:

will-change: transform; ...

Using will-change: The Do’s and The Don’ts

Don’t Use will-change to Declare Changes to Too Many Properties or Elements

Give the Browser Enough Time to Work

Remove will-change After the Changes Are Done

Use will-change Sparingly in Style Sheets