What Does will-change In CSS Actually Do?

It's a hint to the browser, something along the lines of “hey, I’m about to animate these properties, please get ready.”

Browsers may respond by promoting the element to its own GPU compositing layer, pre‑allocating memory, or do nothing at all if they decide the hint isn’t worth it.

The way browsers draw anything on screen generally follows these 3 steps:

If an animation touches only compositor friendly properties like transform and opacity, the browser can skip layout and paint and let the GPU handle everything in the compositing step.

The will-change hint tells the browser that it might want to give this element its own GPU layer. If the browser agrees, the element is promoted to a separate texture, so any future changes won't force its siblings to repaint.

However, the browser makes the final call, if the gain is small or memory is tight, it can ignore the hint.

The browser may also pre-allocate memory for the expected changes, optimize the rendering path and prepare GPU resources.

Without the hint, the browser promotes the element to is own layer only when the animation starts. That one-time layer promotion can cause a tiny stutter in the first frames of the animation.

.animated-button {
  transform: translateX(0px);
  transition: transform 0.3s;
}
 
.animated-button:hover {
  transform: translateX(24px);
}

With will-change, the browser can now pre‑promote the element when the page is idle, so when you hover over the button, the animation is smooth from the first frame.

.animated-button {
  will-change: transform;
  transform: translateX(0px);
  transition: transform 0.3s;
}
 
.animated-button:hover {
  transform: translateX(24px);
}

will-change can smooth out animations, reduce CPU usage and improve the performance of animations.

However, it's an expensive computation and creating the initial layers takes time. That's why using it intentionally and sparingly is the best approach.

/* Good - only on elements that will actually animate */
.animated-button {
  will-change: transform;
}
 
/* Bad - on every element */
* {
  will-change: auto;
}

You should also specify what the changing properties are going to be. It's very similar to transition-property, as for most use cases you'd avoid using transition-property:all.

/* Good - specifying exactly what will change */
.animated-button {
  will-change: transform, opacity;
}
 
/* Not Great - too broad */
.animated-button {
  will-change: all;
}

In practice you can add any valid CSS property to will-change but there are only a handful that really make a difference.

Those include transform,opacity and filter effects like blur or brightness. Modern browsers also handle clip-path and mask fairly well. For these, the browser can move around the GPU without repainting.

There is also scroll-position, which is great for when you're only animating scroll offset.

.parallax-wrapper {
  overflow: auto;
  will-change: scroll-position;
}

And contents, which tells the browser that the things inside the container will update a lot, but the outer container itself won't move.

.virtual-list {
  contain: content;
  will-change: contents;
}

Other properties such as top, background, border, etc. are legal to write, but don't actually speed anything up except ask the browser to reserve extra memory for no real gain.

will-change is pretty powerful when it comes to animations of all kinds. You can think of it as turning on “turbo mode” for an animation. However, it's not a magic performance switch, it's more of a heads-up to the browser.

Using it with moderation and being specific is the key to fully leverage its capabilities.

In some cases you might not even notice the difference as modern browsers are already great at optimizing things, but it can be a game-changer for more complex animations that need to feel smooth from the very first frame.

In case you have any questions reach me at jakub@kbo.sk or see more of my work on Twitter.