The will-change property hints to the browser that certain properties are about to change — enables optimizations (creating compositor layers, stacking contexts, etc.). Excessive use wastes memory; apply only before animation and remove after..animated {
will-change: transform;
}.popup {
will-change: transform, opacity;
}
.popup.done {
will-change: auto;
}autoThe default value. No particular intent expressed; the browser uses its normal heuristics.scroll-positionHints that scroll position will change — browser extends rendered content beyond current viewport.contentsHints that the element's contents will change frequently — reduces aggressive caching.transformHints that the transform property will change — browser promotes the element to a compositor layer.opacityHints that the opacity property will change — browser promotes the element to a compositor layer.leftHints that the left property will change — browser prepares for horizontal position changes.topHints that the top property will change — browser prepares for vertical position changes.CSS Will Change Module Level 1Editor's Draft<custom-ident>W3CMDNEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcespreviousnext
