CSS will-change property

What is will-change?

The will-change property hints to the browser that an element is expected to change, allowing it to set up optimizations ahead of time — such as promoting the element to its own compositor layer.

Syntax

css

.animated-element {
  will-change: transform;
}

.fading-element {
  will-change: opacity;
}

.moving-element {
  will-change: transform, opacity;
}

How it Works

When the browser knows an element will change, it can:

Move the element to a separate GPU layer (layer promotion)
Pre-allocate resources for the animation
Avoid expensive repaints/reflows during the change

When to Use

css

/* ✅ Good: Apply before animation starts */
.card:hover {
  will-change: transform;
}
.card:hover .overlay {
  will-change: opacity;
}

/* ✅ Good: Apply via JS right before animation */
/* element.style.willChange = 'transform'; */
/* Start animation... */
/* After animation: element.style.willChange = 'auto'; */

When NOT to Use

css

/* ❌ Bad: Applied to everything */
* { will-change: transform, opacity, scroll-position; }

/* ❌ Bad: Applied to too many elements permanently */
.every-single-element { will-change: transform; }

/* ❌ Bad: Applied to static elements that don't animate */
.static-header { will-change: transform; }

Performance Considerations

Aspect	Detail
Memory usage	Each promoted layer uses GPU memory
Over-use	Can decrease performance (more layers = more overhead)
Best practice	Apply just before animation, remove after
Permanent use	Only for elements that truly animate frequently

Best Practices

Don't apply globally — only to elements that actually animate
Remove after animation — set back to auto when done
Apply ahead of time — set it before the animation starts (e.g., on hover of parent)
Don't overuse — each layer consumes memory

Toggle Pattern (JS)

javascript

element.addEventListener('mouseenter', () => {
  element.style.willChange = 'transform';
});

element.addEventListener('transitionend', () => {
  element.style.willChange = 'auto';
});

will-change vs transform: translateZ(0)

Previously, developers used transform: translateZ(0) or translate3d(0,0,0) as a "hack" to trigger GPU acceleration. will-change is the proper, intended API for this purpose:

css

/* Old hack (still works) */
.old-way { transform: translateZ(0); }

/* Modern approach */
.modern-way { will-change: transform; }

Important:

will-change is a performance optimization hint, not a magic speed-up. Overusing it can actually make performance worse. Apply it surgically to elements that genuinely animate, and remove it when the animation completes.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems