will-change
The will-change CSS property is a powerful tool that allows developers to hint to the browser about the elements on a page that are likely to change soon. This gives the browser a chance to optimize its rendering of those elements ahead of time, potentially resulting in better performance.
This article will discuss how to use the will-change property and when to avoid using it. We’ll also share information about its browser support.
N.B., will-change should be used with caution, as overuse can actually harm performance rather than improve it.
Jump ahead:
will-change?will-change?
will-change syntaxwill-change to an elementwill-changewill-changewill-changeThe Replay is a weekly newsletter for dev and engineering leaders.
Delivered once a week, it's your curated guide to the most important conversations around frontend dev, emerging AI tools, and the state of modern software.
will-change?will-change is a CSS property that tells the browser which properties of an element (e.g., content, scroll position, opacity, etc.) are likely to change in the future. This allows the browser to optimize the element’s rendering ahead of time, potentially resulting in better performance.
For example, let’s say you have a page with many elements of the same size and color. If you know that one of those elements will change size or color soon, you can use will-change to inform the browser about this change before it happens.
This “heads-up” will allow the browser to optimize its rendering of the element, potentially resulting in better performance when the change occurs.
will-change?There are a few reasons why you might want to use will-change. Let’s take a look.
As mentioned earlier, the primary reason for using will-change is to improve performance. By letting the browser know which elements are likely to change soon, it can optimize its rendering of those elements ahead of time, potentially resulting in better performance when the change actually happens.
will-change can improve the performance of animations. It allows the browser to optimize element rendering, potentially producing smoother and more fluid animations. If you know an element will be animated, you can use will-change to inform the browser about this.
Repaints and reflows are expensive operations that can significantly impact the performance of a page. Repaint occurs when there are changes to an element that do not affect the DOM layout (e.g., a change in an element’s background). Reflows occur when changes to an element do affect the DOM layout (e.g., a change in an element’s width or height).
By using will-change, you can help prevent unnecessary repaints and reflows, further improving the performance of your page.
will-change syntaxThe will-change syntax looks like this:
will-change: <animateable-feature> = auto | scroll-position | contents | <custom-ident>
The will-change property can have one or more values:
auto: Tells the browser that it should apply the standard optimization; this is the default valuescroll-position: Tells the browser that an element’s scroll position will be animated later and should prepare for its content which is not visible in the scroll window of that elementcontents: Tells the browser that the contents of an element will change, so the browser should not cache this element’s content<custom-indent>: This can be any user-defined property, such as transform or background. It tells the browser that the value of the property will soon change; it can also be one or more properties separated by a commaN.B., if you specify a shorthand property as a
custom-indentvalue (e.g.,background), you are telling the browser that thebackground-color,background-image,background-position, and other background-related properties are likely to change
will-change to an elementIt’s relatively simple to use the will-change property. Just add will-change to the element you want to optimize and specify the properties that are likely to change, like so:
element {
will-change: height, width, color;
}
In the example above, we’re telling the browser that the element’s height, width, and color properties are likely to change soon. This allows the browser to optimize the element’s rendering, potentially resulting in better performance when the property changes occur.
Do not use the will-change property at the point of an animation or transition; instead, use it before the transition or animation. will-change is supposed to tell the browser about an upcoming change so that the browser can prepare for it.
The browser can’t prepare for a change that is currently happening or has already occurred.
For example, instead of adding it directly to an element at the point of transition, like this:
my-element:hover {
will-change: color;
color: red;
}
You’ll add it to the element at its initial state when no change has occurred yet:
.element {
will-change: color;
transition: color 300ms ease-in-out;
}
.my-element:hover {
color: red;
}
Also, it’s best practice to turn will-change on and off before and after the desired change occurs, especially if such changes will be infrequent. It can be hard to do this from your CSS stylesheet, but with JavaScript, you can easily add (and remove) it to your elements:
const el = document.querySelector('.parent-element')
el.addEventListener('mouseenter', addWillChange)
el.addEventListener(mouseleave, removeWillChange)
const addWillChange = () => {
this.style.willChange = 'color'
}
const removeWillChange = () => {
this.style.willChange = 'auto'
}
Now that we understand how to use will-change, take a look at when to use it.
will-changeThere are different instances in which you might want to use the CSS will-change property to improve the performance of your page. For example, if you observe that parts of your animation are not running smoothly and other optimizations haven’t helped, you can try will-change to make it more fluid and crisp, thereby improving animation performance:
//CSS file
#animated-element {
will-change: transform, opacity;
}
#animated-element.animated {
transition: transform 0.5s, opacity 0.5s;
transform: scale(2);
opacity: 0;
}
//JS file
const element = document.querySelector('#animated-element');
element.addEventListener('click', () => {
element.classList.toggle('animated');
});

In the above example, we use will-change to let the browser know that the transform and opacity properties of the #animated-element are likely to change when the element is clicked. This enables the browser to optimize its element rendering, potentially producing smoother and more fluid animations.
Another use case for the CSS will-change property is when you know that the size or position of an element is going to change soon. Using will-change to inform the browser about this change ahead of time, enabling the browser to optimize its rendering of the element, potentially resulting in better performance when the change occurs:
//CSS file
#changing-element {
will-change: width, height, transform;
}
#changing-element.changed {
width: 200px;
height: 200px;
transform: translateX(100px);
}
//JS file
const element = document.querySelector('#changing-element');
element.addEventListener('click', () => {
element.classList.toggle('changed');
});

Here, we use will-change to let the browser know that the width, height, and transform properties of the #changing-element are likely to change when clicked.
Other examples where will-change can be helpful are when the style of an element, like the color, font size, or text decoration, is going to change soon.
will-changeThe will-change property can be useful for optimizing performance and improving animations in certain scenarios, but there are some cases where it may be best to avoid using it altogether. Use will-change with caution and only on elements that are likely to change soon and benefit from optimization.
Here are some situations where you should avoid using will-change:
will-change to an element when an animation or transition is already taking place. Only use will-change when a change is imminent or likely to happen in the near future to give the browser sufficient time to optimize its rendering. Using will-change when a change has already occurred or is no longer imminent can strain the browser and harm performancewill-change as it can cause unnecessary performance overheadwill-change can be counterproductive for small elements on a page, as the performance gain from optimizing the rendering of a small element may be negligiblewill-change on non-animatable properties such as font-size or border-radius, it may have no effect on performance or could even negatively impact performancewill-change is a relatively new CSS property and may not be supported in older browsers. If you need to support older browsers, you may need to avoid using will-change altogetherwill-change can actually harm performance rather than improve it. You should avoid applying will-change to several elements on a page. This can cause the browser to hog machine resources, thereby slowing down the page load time. Instead, only use it on the elements that are likely to change soon and benefit from optimization. In general, will-change is best used as a solution for responding to performance issues rather than a means to preempt themwill-changeThe will-change property is supported in most modern browsers, including Microsoft Edge 79+, Google Chrome 36.0+, Mozilla Firefox 36.0+, Apple Safari 9.1+, and Opera 24+. You can learn more about its browser support here.
The will-change CSS property is a valuable tool for optimizing the performance of elements on a page that are likely to change very soon. By letting the browser know about these changes ahead of time, the browser can optimize its rendering of those elements, potentially resulting in better performance.
However, will-change should be used with caution, as overuse can actually harm performance rather than improve it. You should limit the use of this property to cases when there is a specific need, such as when animating an element or when you know that an element’s properties will change. Then, remove it as soon as it is no longer needed.
It’s also important to realize that the browser may ignore the will-change hint if it’s unnecessary. will-change is supported in most modern browsers.
By understanding when and how to use CSS will-change property, developers can leverage this powerful tool to improve the performance of their websites and applications.
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket lets you replay user sessions, eliminating guesswork around why bugs happen by showing exactly what users experienced. It captures console logs, errors, network requests, and pixel-perfect DOM recordings — compatible with all frameworks.
LogRocket's Galileo AI watches sessions for you, instantly identifying and explaining user struggles with automated monitoring of your entire product experience.
Modernize how you debug web and mobile apps — start monitoring for free.

Promise.all still relevant in 2025?In 2025, async JavaScript looks very different. With tools like Promise.any, Promise.allSettled, and Array.fromAsync, many developers wonder if Promise.all is still worth it. The short answer is yes — but only if you know when and why to use it.

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 29th issue.

Learn about the new features in the Next.js 16 release: why they matter, how they impact your workflow, and how to start using them.

Test out Meta’s AI model, Llama, on a real CRUD frontend projects, compare it with competing models, and walk through the setup process.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
4 Replies to "When and how to use CSS <code>will-change</code>"
I didn’t like this article. It is very vague and does not explain how will-change works. It does not even mention that the mdn documentation advise to avoid using it if not necessary.
Warning: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.
Repeating that it will make animations run more smoothly or improve performance does not explain how it works on when it should be used.
In my opinion it is better to just read the mdn documentation page as it reads better and has more information. A novice after reading this article may think that it is fine to apply will-change on any element that will change.
Thank you for your feedback. I’m sorry if the article wasn’t as clear as you would have liked. I did mention in the introduction and conclusion that will-change should be used with caution as it can do more harm than good if used incorrectly. I agree that the MDN documentation is a valuable resource, and I encourage anyone who wants to learn more about will-change to read it. Thank you again for your comment.
will-change should only be used as a last resort
Thanks for your comment. I’m glad to see we both agree that will-change should only be used as a last resort, which I mentioned in the introduction and conclusion of my article. It’s important to use this CSS property with caution and only when necessary. If you have any other feedback, I’d be happy to hear it. Thanks again.