will-change and Layer Promotion
Hint the browser to promote elements to GPU layers using will-change for smoother animations.
What is will-change?
will-change hints to the browser that an element will be animated, allowing it to set up optimizations in advance — such as promoting the element to its own GPU compositor layer before the animation starts.
Syntax
Specify which property will change: will-change: transform, will-change: opacity, will-change: transform, opacity. Use will-change: auto to remove hints when animation ends.
All lessons in this course
- Critical CSS and Render Blocking
- Layout Paint and Composite: The Rendering Pipeline
- will-change and Layer Promotion
- CSS Coverage and Unused Styles