Q26: What is GPU Hardware Acceleration in CSS animations and how is it triggered?
Hardware acceleration offloads animation rendering from CPU to GPU. CPU rendering triggers expensive Layout and Paint operations. GPU acceleration targets compositor properties (transform, opacity, filter), ensuring 60fps performance.
GPU Accelerated Animations
.animated-box {
will-change: transform, opacity;
transition: transform 0.3s ease;
}
.animated-box:hover {
transform: translateY(-10px) scale(1.05);
}💡 Animating transform avoids triggering layout reflows, delegating operations to GPU rendering layers.
Key Takeaways
- Animates GPU composited properties (
transform,opacity) to avoid reflow/paint passes. will-changesignals render engines to prepare GPU layer acceleration.
Knowledge Check
Which set of CSS properties can be animated without triggering CPU Layout or Paint rendering passes?