3 min read
•Question 30 of 49mediumWhat is will-change in CSS?
Understanding browser optimization hints.
What You'll Learn
- What will-change does
- When to use it
- Performance considerations
What it Does
will-change tells the browser to optimize for upcoming changes to an element.
Syntax
styles.cssCSS
.element {
will-change: transform;
will-change: opacity;
will-change: transform, opacity;
}Best Practices
styles.cssCSS
/* Add before animation starts */
.element:hover {
will-change: transform;
}
.element:active {
transform: scale(1.1);
}
/* Remove after animation */
.element {
will-change: auto;
}Don't Overuse
styles.cssCSS
/* BAD - too many hints */
* { will-change: all; }
/* GOOD - specific and temporary */
.animate-on-hover:hover {
will-change: transform;
}