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

Question

[bogette]

При создании сложной анимации, но которую можно реализовать и с помощью css, и с помощью javascript - выбор в чью сторону предпочтительнее?

Comments

[crast]

Предпочитаю GSAP. Готовые плагины упрощают и ускоряют написание кода, производительность - на уровне, поддержка браузеров - основательная. Мозг не перегревается. Что еще надо для счастья )

P.S. GreenSock Animation Platform

Answer 1

[Ivan Bogachev]

но которую можно реализовать и с помощью css, и с помощью javascript...
ваше мнение хотел услышать

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

В остальных случаях стоит смотреть по ситуации - разные :hover / :focus эффекты обычно легко реализуются на CSS, и, если это так, то зачем что-то придумывать? CSS в последнее время очень даже неплох. Но если, например, в проекте вся анимация делается на JS, то может иметь смысл продолжать делать так же, сохраняя единообразие в коде.

Answer 2

[xmoonlight]

Нужен контроль над процессом анимации и дальнейшее расширение функционала - js
Нужно сделать примитивную анимацию с минимальными затратами на CPU - css

Пример:
Хаотичное включение и мигание лампочек - лучше через keyframes на css.
А вот разбивание их по клику/тапу со звуком, вспышками и стёклами - лучше через js.

Comments

[riddlr]

Ты запаришся делать хаотичное мигание на CSS.

[xmoonlight]

riddlr, Оно хаотичное визуально, а не программно. Программно - разумеется кадры по кругу с разными таймингами с задержкой на изменение стиля. Так, что... ничего сложного тут нет.
И бонусом, потребление CPU - минимальное.

[riddlr]

xmoonlight, человеческий глаз легко распознает вплоть до 5-10 секундный луп. Надо быть полным дебилом чтобы описывать такую анимацию в кейфреймах.

[xmoonlight]

riddlr, Просто, для новичка - это, действительно, неявно выглядит и сложно для понимания, поэтому - поясню:
1. Смену состояний - распознаёт мозг, а не глаз.
2. Не распознаешь луп, если он сделан правильно.
3. И самое сложное: CSS эффекты - можно "накладывать" во времени друг на друга, если они меняют разные свойства объекта - комбинировать, получая сразу множество различных сочетаний.

Answer 3

[artkhromov]

Если вы сможете реализовать анимацию используя только свойства transform, opacity и filter - лучше на CSS.

CSS анимации будут более производительными за счет использования GPU пока они не вызывают repaint.
Вот тут хорошо описан принцип:
https://developers.google.com/web/fundamentals/per...

Answer 4

[Stalker_RED]

Лучше css, пока вам не нужно что-то сложное, что на css не получается.

Answer 5

[Борис Кузьмин]

Иногда достаточно CSS (и это замечательно), иногда CSS пасует перед JS даже в тех случаях, когда, казалось бы, не должен (тут, например, чтобы добиться адекватной работы в старых браузерах, пришлось переписать все на JavaScript).

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

Наверное, не очень разумно пилить ВСЕ анимации на чём-то одном, стоит выбирать исходя из пожеланий к результату и временных ограничений.

Answer 6

[Ki Rotcow]

Легче и меньше кода на js. Но если это простенькая анимация можно и на css.
ИМХО