Я немного опровергну то, что писали выше.
На самом деле самое затратное в анимации — это пересчет свойств и отрисовка. Я уверен вы часто попадали на сайт, который просто тормозит при скролле без всяких поползновений в JS. Стадия отработки JS редко превышает 1/10 от всего количества времени потраченного на подготовку кадра. Сам кадр готовится не каждые 1/60с, а когда прошлый кадр был подготовлен и отображен, если использовать requestAnimationFrame.
CSS анимация часто занимает больше времени на обсчет кадров, т.к. при использовании любой easing функции, заданной через точки на кривой Безье идет на много больше вычислений. Безье это функция (x, y) от t, а нам надо получить функцию x от y. Потому в CSS идет обсчет 8 точек кривой, а потом для каждой точки которую мы хотим получить, проводится аппроксимация. В JS же мы можем просто применить функцию x от y и сократить пачку обсчетов. Это практически незаметно при небольшом количестве элементов на странице, но при большом довольно таки чувствуется разница.
Другое дело, что грамотно написать всю анимацию на JS куда сложнее, чем просто пульнуть пару свойств на CSS.
В общем случае используйте CSS всегда, когда у вас нет кучи объектов и когда вам не сильно важен контроль над происходящим на странице.
Самый большой буст в производительности анимации вы можете получить не при смене CSS на JS, а при хорошем понимании того, что может вашу анимацию затормозить.
