CSS will-change Property

The will-change property provides a hint to the browser about which properties an element will change, allowing it to optimize rendering before the animation starts.

selector { will-change: auto | scroll-position | contents | <custom-ident>; }
auto The browser performs its standard optimizations without any specific hints.
scroll-position Tells the browser the element's scroll position is likely to change or animate.
contents Tells the browser the actual content or styling inside the element is likely to change.
<custom-ident> The specific CSS property name that is expected to change, such as transform or opacity.

Code Examples

A basic CSS implementation providing a hint to the browser that an element's transform property will be updated on hover.

.layer-optimized {
  will-change: transform;
  transition: transform 0.3s ease-out;
}
.layer-optimized:hover {
  transform: scale(1.05);
}

An advanced implementation using JavaScript to toggle the hint only when the user hovers, which manages system resources efficiently.

<div id="card" style="width: 200px; height: 200px; background-color: #222222; transition: opacity 0.4s;"></div>
<script>
const card = document.getElementById("card");
card.addEventListener("mouseenter", () => {
  card.style.willChange = "opacity";
});
card.addEventListener("mouseleave", () => {
  card.style.willChange = "auto";
});
card.onclick = function() {
  this.style.opacity = "0.2";
};
</script>

Pro Tip

Instead of hardcoding will-change in your CSS files, use a JavaScript event listener on the parent container. When the mouse enters the area, set will-change on the target element. Once the animation ends, clear the property. This keeps the browser's memory footprint clean while still getting the performance boost right when it counts.

Deep Dive

Think of will-change as calling a restaurant to book a table before you arrive. It gives the browser a heads-up so it can prepare the necessary resources, like creating a new graphics layer, ahead of time. This prevents the momentary stutter or flicker often seen when heavy animations start. By flagging a property like transform or opacity, you tell the browser to offload that element to the GPU. However, overusing it is like every person in town calling the same restaurant at once; the kitchen gets overwhelmed and performance actually drops. Use it only as a last resort when you see visible jank in your animations.

Best Practices

Apply will-change only when performance issues are evident and remove it once the animation or change is complete. Use it sparingly on a small number of elements to avoid consuming too much system memory. The best approach is to toggle the property via JavaScript right before a user interacts with an element, such as on a hover or focus event.

Common Pitfalls

The biggest mistake is applying will-change to too many elements or keeping it active indefinitely. This can hog a massive amount of RAM and slow down the entire page. Also, don't use it as a premature optimization; browsers are already very good at optimizing most animations on their own. Only reach for it if you see actual jank in your rendering.

Accessibility

While will-change doesn't directly impact screen readers, it ensures smooth visual transitions, which helps users with motion sensitivity by reducing stuttering or sudden visual jumps. However, always respect the prefers-reduced-motion media query regardless of how much you optimize the rendering engine.

Dev Data Table: will-change property

default auto
animatable no
inherited no
experimental no
year_intro 2013
year_standard 2015
js_syntax_1 element.style.willChange = "transform";
js_syntax_2 element.style.setProperty("will-change", "opacity");
js_note Use JavaScript to toggle this property on just before an action and remove it after the animation finishes to keep resource usage low.
browsers { "Chrome": 36, "Edge": 79, "Firefox": 36, "Safari": 9.1, "Opera": 23, "Chrome Android": 36, "Safari on iOS": 9.3, "Samsung Internet": 3, "Opera Mobile": 24 }
results render here...