CSS `will-change`: A Performance Hint, Not a Magic Wand
will-change tells the browser which properties you'll animate, letting it optimize rendering ahead of time. Use it to fix jank in complex transitions, but never apply it preemptively—overuse wastes memory and can make performance worse.
Why it exists
Browsers are very good at optimizing rendering, but complex animations can still cause stuttering or "jank." The will-change property was created to give developers a way to signal an upcoming, computationally expensive change, allowing the browser to prepare for it and render the animation smoothly.
The mental model
Think of will-change as telling a stage crew, "Get ready to move that set piece." You give them a heads-up so they can prepare. If you tell them too early or tell them to prepare for everything, they'll be overwhelmed and inefficient. If you tell them right as the change needs to happen, the heads-up is useless. It's a targeted, temporary instruction.
How it works
When you apply will-change for a property like transform or opacity, the browser can make optimizations. A common one is promoting the element to its own compositor layer. This isolates its rendering, so future changes only require re-compositing that single layer, which is much faster than re-painting a larger area. This optimization trades increased memory usage (for the new layer) for faster animation performance.
When to use it
Use will-change as a last resort to fix existing, diagnosed performance problems. The best practice is to apply it with JavaScript just before an animation is expected to start (e.g., on hover) and remove it once the animation completes. This gives the browser sufficient time to set up optimizations without holding onto expensive resources indefinitely.
When not to use it
Do not apply will-change to many elements or to elements in a general stylesheet. This causes the browser to hold onto optimizations and memory for far too long, leading to worse performance. If your page is already performing well, do not add will-change as a premature optimization; it will likely make things worse.
One canonical example
A slide-out navigation menu often benefits from this. When a user hovers over the hamburger icon, JavaScript can add will-change: transform to the menu element. Then, when the user clicks, the slide-out animation is more likely to be smooth because the browser was prepared. Once the animation is finished, another script removes the will-change property to free up resources.
Interview question
When is the most appropriate time to apply the `will-change` CSS property to an element?
- a.Just before an animation is expected to start, and then remove it once the animation completes.Correct
- b.Permanently to any element that frequently undergoes complex transformations, to maintain continuous optimization.
- c.As a general best practice for all interactive elements on a page, even if no performance issues are observed.
- d.In a global stylesheet for all elements that might ever animate, to ensure maximum performance.
Why? this is the answer
The card explicitly states that `will-change` should be applied with JavaScript just before an animation and removed once it completes. Applying it generally or preemptively (like option C suggests) is warned against, as it can lead to worse performance due to wasted memory.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #performance
- #browser-rendering
- #animation
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles