Hardware Acceleration: Getting Smooth CSS Animations

WHY IT EXISTS To achieve a consistent 60 frames per second (fps) for animations, which is the gold standard for a smooth user experience. The browser's main thread is often busy with JavaScript, layout calculations, and painting. Asking it to also calculate animation frames for properties that change page layout, like width or top, often leads to dropped frames and a stuttering, 'janky' animation.

THE MENTAL MODEL Think of your webpage as a painting on a single canvas, handled by the CPU. To animate one small part, the CPU has to repaint everything around it on every frame. Hardware acceleration is like cutting that element out, placing it on a clear sheet of plastic (a new 'compositing layer'), and giving it to a specialist (the GPU) to move around. The original painting doesn't need to be redrawn, and the specialist is much faster at this one job.

HOW IT WORKS Certain CSS properties, primarily transform and opacity, signal to the browser that an element's animation can be 'composited'. The browser promotes the element to its own compositing layer. This layer is essentially a texture uploaded to the GPU. The GPU can then manipulate this texture—move, scale, rotate, or fade it—very efficiently without involving the CPU or affecting the layout of other elements. The animation runs smoothly on a separate thread, freeing the CPU for other tasks.

WHEN TO USE IT Use transform for any geometric changes: moving (translate), scaling (scale), or rotating (rotate). Use opacity for fading elements in and out. These are the two properties that are reliably hardware-accelerated across modern browsers. The will-change property can also be used to hint to the browser that an element will be animated, allowing it to create the layer ahead of time, but it should be used sparingly.

WHEN NOT TO USE IT Avoid animating properties that trigger layout changes (reflow) and repainting. This includes width, height, margin, padding, left, top, right, bottom, and font-size. Animating these keeps the work on the CPU and negates the benefits of hardware acceleration, often resulting in the jank you were trying to avoid.

ONE CANONICAL EXAMPLE To move an element 100 pixels to the right, do not animate its left property from 0px to 100px. This causes a reflow on every frame. Instead, apply transform: translateX(100px) inside an animation or transition. The browser creates a layer for the element and lets the GPU handle the movement, resulting in a much smoother animation.