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