CSS `will-change` Property

#header {
    will-change: opacity;
}

Modern CSS renderers perform a number of complex optimizations in order to render webpages quickly and efficiently. Unfortunately, employing these optimizations often has a non-trivial start-up cost, which can have a negative impact on the responsiveness of a page.

The will-change property defined in the CSS Will Change Module allows an author to declare ahead-of-time what properties are likely to change in the future, so the UA can set up the appropriate optimizations some time before they’re needed. This way, when the actual change happens, the page updates in a snappy manner.

Essentially the CSS renderer will then render the element on a separate, hardware powered, layer. The will-change property can be considered a replacement for this old trick:

#header {
    transform: translateZ(0);
}

CSS Will Change Module Level 1 →