Hardware Acceleration: Getting Smooth CSS Animations
Use the GPU for smooth CSS animations by sticking to transform and opacity. This avoids costly CPU work like layout recalculations, keeping frame rates high. The footgun is animating properties like width or left, which cause jank.
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.
Interview question
Why are CSS animations using 'transform' and 'opacity' generally smoother than those using properties like 'width' or 'left'?
- a.They allow the browser to predict the animation's end state more accurately, enabling pre-rendering of frames.
- b.The browser can create a separate compositing layer for elements animated with these properties, allowing the GPU to handle the animation without affecting layout.Correct
- c.They are simpler properties that the browser can animate directly on the main thread without causing reflows.
- d.These properties are pre-optimized by browser vendors to always run at 60fps, regardless of other page activity.
Why? this is the answer
The card explains that 'transform' and 'opacity' allow the browser to promote an element to its own compositing layer, which the GPU can then manipulate efficiently without involving the CPU or affecting page layout. This offloading to the GPU and avoidance of layout recalculations is key to smooth animations. Option C is a tempting distractor because these properties do avoid reflows, but it incorrectly states the animation happens 'directly on the main thread' rather than being offloaded to the GPU.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #performance
- #browser
- #animation
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles