1 / 1
Performant CSS Animations: Transform vs. Left
This demo illustrates the performance difference between animating an element's 'left' property and its 'transform: translateX()' property. Animating 'left' forces the browser to re-calculate layout on every frame, leading to a 'janky' or stuttering effect. In contrast, 'transform: translateX()' allows the browser to offload the animation directly to the GPU, skipping layout and paint, resulting in a smooth 60fps animation.
animationcsslayoutperformancetransformgpu