Как активировать gpu-анимацию?

Question

[r_g_b_a]

В 2021 году все еще нужно использовать transform: translateZ(0) или will-change: transform для активации gpu-анимации и получения наибольшей плавности? Или просто анимирование того же left даст визуально аналогичный результат?

Comments

[RAX7]

в CSS нет специального режима для GPU-композиции, это просто оптимизация для решения специфических задач
https://habr.com/ru/company/odnoklassniki/blog/313978/
https://www.smashingmagazine.com/2016/12/gpu-anima...

Answer 1

[Анастасия]

посмотри в сторону gsap https://greensock.com/gsap/ . там у них свои расчёты и работает всё очень плавно

Comments

[Анастасия]

Alice, внимательно читай: https://greensock.com/licensing/
потом пиши

Answer 2

[tundramani]

ускоренно анимируются картой только transform и opacity

left и тд не анимируются

Answer 3

[r_g_b_a]

Нашел такой пример
https://codepen.io/paulirish/pen/nkwKs
https://codepen.io/paulirish/pen/LsxyF
Если в firefox все довольно плавно, то в chrome первый пример заметно подлагивает при 10+ изображения.
При этом во втором примере используется просто translate даже без will-change