Почему тормозит css-анимация?

Question

[Дмитрий Масленников]

Суть вопроса в следующем. На сайте есть sidebar (выезжающее справа меню), анимация которого построена на css-transitions. В неактивном состоянии sidebar имеет следующий код:

position: fixed;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
width: 300px;
background: #fff;
z-index: 9999;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
transform: translate(300px, 0px);

в активном состоянии к нему добавляется класс с таким кодом:

transform: translate(0px, 0px);
opacity: 1;

Проблема в том, что периодически наблюдаются тормоза при открытии/закрытии меню. Профайлер Google Chrome толком не дает никакой информации в чем может быть причина подвисаний. На кадр анимации уходит всего 1-3 ms, но FPS падает до 15-20 кадров. Тормоза вылазят периодически (в эти моменты тормозит вся анимация), из закономерностей заметил, что они часто появляются в периоды простоя (когда на сайте не совершается никаких действий 20-30 секунд).

Полагаю, возможная причина отчасти в самом железе/ПО (хотя оно шустрое), но хотелось бы устранить подвисания (т.к. вероятно это будет не у меня одного). Отсюда вопросы:

1. В чем может быть причина подобных тормозов, кто сталкивался с этим?
2. Какие решения Вы использовали, чтобы сделать анимацию более плавной?

P.S. "will-change: transform;" не сильно поможет, т.к. браузер и без него все выносит на отдельный слой.

Comments

[account-4]

Вопрос достойный уровня "программный архитектор"

[Дмитрий Масленников]

account-4 не понимаю причин вашей иронии. сделать качественную плавную анимацию иногда бывает сложнее, чем продумать целый блок проекта. большинство сайтов на слабых машинах безбожно тормозит, редко кто проводит глубокую оптимизацию анимации.

Answer 1

[Дмитрий Масленников]

Добиться более плавной анимации помог комплекс следующих действий:

1. Точное указание property у transition (т.е. вместо "transition: all" указываем конкретное свойство с которым производится анимация).
2. Использование при JS манипуляции с классами не classList, а className. Переход на это решение позволил добиться реального прогресса в плавности анимации. В частности, это решение подсказал VK, там используется такая же схема. Метод className входит в DOM Core (level 2), имеет практически полную совместимость со всеми браузерами, а также более эффективно обрабатывается браузерными движками с минимальными задержками.

Answer 2

[Алексей Николаев]

Возможно, проблема в том, что браузеру приходится перерисовывать много элементов в DOM. Попробуйте поюзать contain: content.

2. Какие решения Вы использовали, чтобы сделать анимацию более плавной

Native JS, т.к. он быстрее.

Comments

[Дмитрий Масленников]

с использованием чистого JS полностью согласен, выигрыш в скорости по сравнению с JQuery или аналогичными фреймворками может достигать 10-15 раз. но здесь видимо аппаратная проблема, завязанная на то, что при простое браузер сразу не может передать все данные в GPU (а при транзакциях именно он полностью обрабатывает графику).

[Саша]

Алексей Николаев зачем подтягивать целую библиотеку ради анимации одного, двух, пяти блоков?
зачем использовать JS там, где можно обойтись без него?

[account-4]

Так тут же просто добавление класса - какой к чертям JS?

[Дмитрий Масленников]

Саша это про ситуацию с JS в общем. пишу на чистом JS, но пример привел ради сравнения. но, в случае с добавлением класса открытия sidebar, он осуществляется именно через JS. не вижу варианта обойтись чистым css, учитывая, что там еще должна быть правильная обработка закрытия (по клику не на сайдбаре, либо при клике на крестик).

[Саша]

Дмитрий Масленников: добавлять класс это одно дело, а как советует Алексей подтягивать целую библиотеку ради анимации которую можно реализовать на css другое)

Answer 3

[Егор Живагин]

- will-change тут скорее должен быть с opacity
- Очень правильно подсказали про translate3d, но вцелом обе эти поправки не должны дать кардинальных изменений
- Вы зачем-то меняете весть translate, т.е. и по X и по Y. В то время, как значение Y не меняется. Юзайте

transform: translateX(200px);
...
transform: translateX(0px);

Конечно, это можно оформить и на чистом css со скрытым инпутом-радио (крестик "закрыть" - label for=""), но это уж совсем крайняя мера) Всё таки такой интерактив правильнее писать на JS

Comments

[Дмитрий Масленников]

да, согласен с этим. отчасти помогло более конкретное определение свойств у transition. В данном примере вместо "transition: all 250ms ease-in-out;" указал "transition: transform 250ms ease-in-out, opacity 250ms ease-in-out;".

Answer 4

[Саша]

Дмитрий Масленников оптимизируйте анимацию.
укажите will-change и вместо all у transition перечислите свойства которые будете анимировать, используйте translate3d вместо translate

Comments

[Дмитрий Масленников]

Саша по will-change и свойству all все понятно, но как translate3d ускоряет анимацию по сравнению с translate?

[Саша]

Дмитрий Масленников: пробуйте, сравнивайте fps)
он конечно немного устаревший, но вдруг поможет))
почитать можно здесь: frontender.info/css-will-change-property

[Дмитрий Масленников]

Саша спасибо за ссылку, подробный и качественный материал

[Саша]

Дмитрий Масленников: не за что)