Which properties are best to animate for smooth 60 FPS?

Explanation

transform and opacity are usually handled at the compositing stage and don't trigger layout or paint. Animating width, top or margin forces the browser to recalculate layout every frame, causing jank. That's why you move things with translate, not left.

Further reading

• web.dev: High-performance CSS animations ↗
• web.dev: Rendering performance ↗