Які властивості найкраще анімувати для плавності 60 FPS?

Пояснення

transform і opacity зазвичай обробляються на етапі композитингу й не спричиняють перерахунку розкладки (layout) та перемальовування (paint). Анімація width, top, margin змушує браузер перераховувати layout кожен кадр, що дає ривки. Тому зсувають через translate, а не через left.

Де почитати

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