Które właściwości najlepiej animować, aby uzyskać płynne 60 FPS?

Wyjaśnienie

transform i opacity są zwykle obsługiwane na etapie kompozycji i nie wywołują layoutu ani malowania. Animowanie width, top czy margin zmusza przeglądarkę do przeliczania układu w każdej klatce, co powoduje przycięcia. Dlatego przesuwa się przez translate, a nie left.

Do poczytania

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