CodePark/ questions / Transitions & animations
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Transitions & animations

You want to slide a panel in smoothly at 60fps. Which properties are cheapest to animate?

transform and opacity

transform and opacity is right. The browser can usually hand these to the compositor. The compositor is the part of the browser that combines already-painted layers, often on the GPU. So the browser doesn't need to recalculate layout or repaint, and the motion stays smooth.

left and top is the tempting wrong answer. Geometry properties like left, width, margin and padding trigger layout (reflow) and paint on every frame. That is expensive on large pages.