`transform: translate3d(0,0,0)` promotes layer but doesn't speed layout-bound work.

Browser Performance

GPU acceleration in CSS

<h2>Summary</h2>
<p>Promoted layers (transform, opacity, will-change, video, canvas) composite on GPU — too many layers waste memory. <code>will-change</code> hints promotion; remove after animation. Layer explosion from excessive <code>translateZ(0)</code> hacks hurts mobile GPUs. Inspect layers in Chrome DevTools Layers panel.</p>
<h2>Code example</h2>
<pre><code class="language-css">.animated-card {
  will-change: transform;
  transform: translateZ(0);
}

.animated-card.done {
  will-change: auto; /* remove hint after animation */
}
</code></pre>
<h2>Key points</h2>
<ul>
<li>Promoted layers (transform, opacity, will-change, video, canvas) composite on GPU — too many layers waste memory.</li>
<li><code>will-change</code> hints promotion; remove after animation.</li>
<li>Layer explosion from excessive <code>translateZ(0)</code> hacks hurts mobile GPUs.</li>
<li>Inspect layers in Chrome DevTools Layers panel.</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count">Compositing layers</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/will-change">will-change</a></li>
</ul>
<h2>Related concepts</h2>
<ul>
<li><a href="/blogs/level-3-paint-vs-layout-vs-composite">Paint vs Layout vs Composite</a></li>
<li><a href="/blogs/level-3-gpu-acceleration-in-css">GPU acceleration in CSS</a></li>
</ul>


Promoted layers (transform, opacity, will-change, video, canvas) composite on GPU — too many layers waste memory.

Browser compositing layers

**Layout** — geometry changed, reflow subtree.