При создании сложной анимации, но которую можно реализовать и с помощью css, и с помощью javascript - выбор в чью сторону предпочтительнее?
Ответы:
но которую можно реализовать и с помощью css, и с помощью javascript...
ваше мнение хотел услышать
Мне самому нравится делать все на CSS, но... Если анимация должна быть интерактивной и нужно ее останавливать в процессе, откатывать в изначальное положение и.т.д., или некоторые ее части зависят от данных (в широком смысле - это и движение по сложной траектории, и построение графиков и.т.д.) и их проще рассчитать скриптом, чем подбирать коэффициенты в CSS keyframes, то JS будет лучшим выбором. Если это последовательность мало связанных между собой изменений, то опять же скрипты почти всегда будет проще реализовать. Если речь идет о CSS-анимациях с фильтрами (особенно SVG-фильтрами), то можно влететь в очень сильные проблемы с производительностью на слабом железе. И никакие хаки с GPU тут не помогут - все равно будет тормозить. В такой ситуации может иметь смысл не просто писать на JS, но и подключить WebGL и все делать руками на шейдерах.
В остальных случаях стоит смотреть по ситуации - разные :hover / :focus эффекты обычно легко реализуются на CSS, и, если это так, то зачем что-то придумывать? CSS в последнее время очень даже неплох. Но если, например, в проекте вся анимация делается на JS, то может иметь смысл продолжать делать так же, сохраняя единообразие в коде.
Нужен контроль над процессом анимации и дальнейшее расширение функционала - js
Нужно сделать примитивную анимацию с минимальными затратами на CPU - css
Пример:
Хаотичное включение и мигание лампочек - лучше через keyframes на css.
А вот разбивание их по клику/тапу со звуком, вспышками и стёклами - лучше через js.
Лучше css, пока вам не нужно что-то сложное, что на css не получается.