Use will-change when an animation remains choppy or flickers despite normal browser optimization. It tells the browser which property is expected to change before the animation begins. section 16.3.1
Preparing a transform animation
Applying will-change: transform to an animated element can prompt the browser to place it on its own paint layer. The main layer then avoids repeated repainting while the transform changes. section 16.3.1
Use the property cautiously:
- Do not apply it across the page before observing a performance problem. section 16.3.1
- Test animation performance before and after adding it, and keep it only when performance improves. section 16.3.1
Figure 16.12 The three stages of the rendering pipeline
Use the rendering-pipeline figure to connect animation smoothness with recalculation, painting, and layer decisions. section 16.3.1
