Что лучше использовать для анимаций css или js? И почему?

При создании сложной анимации, но которую можно реализовать и с помощью css, и с помощью javascript - выбор в чью сторону предпочтительнее?
  • Вопрос задан
  • 1693 просмотра
Решения вопроса 1
sfi0zy
@sfi0zy
UI developer. Верстаю неверстаемое.
но которую можно реализовать и с помощью css, и с помощью javascript...
ваше мнение хотел услышать

Мне самому нравится делать все на CSS, но... Если анимация должна быть интерактивной и нужно ее останавливать в процессе, откатывать в изначальное положение и.т.д., или некоторые ее части зависят от данных (в широком смысле - это и движение по сложной траектории, и построение графиков и.т.д.) и их проще рассчитать скриптом, чем подбирать коэффициенты в CSS keyframes, то JS будет лучшим выбором. Если это последовательность мало связанных между собой изменений, то опять же скрипты почти всегда будет проще реализовать. Если речь идет о CSS-анимациях с фильтрами (особенно SVG-фильтрами), то можно влететь в очень сильные проблемы с производительностью на слабом железе. И никакие хаки с GPU тут не помогут - все равно будет тормозить. В такой ситуации может иметь смысл не просто писать на JS, но и подключить WebGL и все делать руками на шейдерах.

В остальных случаях стоит смотреть по ситуации - разные :hover / :focus эффекты обычно легко реализуются на CSS, и, если это так, то зачем что-то придумывать? CSS в последнее время очень даже неплох. Но если, например, в проекте вся анимация делается на JS, то может иметь смысл продолжать делать так же, сохраняя единообразие в коде.
Ответ написан
Пригласить эксперта
Ответы на вопрос 6
Eridani
@Eridani
Мимо проходил
Тут всё разжевано
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Нужен контроль над процессом анимации и дальнейшее расширение функционала - js
Нужно сделать примитивную анимацию с минимальными затратами на CPU - css

Пример:
Хаотичное включение и мигание лампочек - лучше через keyframes на css.
А вот разбивание их по клику/тапу со звуком, вспышками и стёклами - лучше через js.
Ответ написан
@artkhromov
Если вы сможете реализовать анимацию используя только свойства transform, opacity и filter - лучше на CSS.

CSS анимации будут более производительными за счет использования GPU пока они не вызывают repaint.
Вот тут хорошо описан принцип:
https://developers.google.com/web/fundamentals/per...
Ответ написан
Stalker_RED
@Stalker_RED
Лучше css, пока вам не нужно что-то сложное, что на css не получается.
Ответ написан
KzmnbrS
@KzmnbrS
My name is Boris
Иногда достаточно CSS (и это замечательно), иногда CSS пасует перед JS даже в тех случаях, когда, казалось бы, не должен (тут, например, чтобы добиться адекватной работы в старых браузерах, пришлось переписать все на JavaScript).

К тому же есть множество всяческих нюансов (анимировать движение лучше через translate, нежели top и left, et cetera), которые нужно учитывать вне зависимости от выбранного инструмента.

Наверное, не очень разумно пилить ВСЕ анимации на чём-то одном, стоит выбирать исходя из пожеланий к результату и временных ограничений.
Ответ написан
PavlR
@PavlR
Дизайню, верстаю...
Легче и меньше кода на js. Но если это простенькая анимация можно и на css.
ИМХО
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы