What is the CSS will-change property and when should it be used?

The will-change property is a hint to the browser that an element's specified properties are about to change, allowing it to set up hardware acceleration optimizations in advance. Example: will-change: transform, opacity causes the browser to promote the element to its own GPU compositor layer before the animation starts, preventing the jank of a mid-animation layer promotion. When to use it: sparingly, only on elements you know will animate, and only when you have measured a performance problem. When NOT to use it: do not apply it to everything globally — each will-change layer consumes GPU memory. Apply it just before an animation (via JS) and remove it afterwards. It is a last resort optimization tool, not a default setting.