Анимация CSS3 или JavaScript

[VIVA]

Ребят, подскажите, пожалуйста, есть ли вообще смысл изучать и применять анимирование на CSS3, ведь javascript куда чаще используется для решения данных задач?  Да и вообще, в каких случаях целесообразнее использовать CSS3, а когда javascript?

Заранее спасибо всем кто обьяснит и поделиться своим опытом с бедненьким неучем!

 

Edited December 21, 2015 by VIVA

[abrahadabra]

почти всегда целесообразнее использовать css-анимацию. JS имеет смысл использовать только для смены состояний, между которыми переход выполняется средствами css, а также в тех случаях, когда свойства анимируемого элемента нужно вычислять.

[VIVA]

Прости за возможно глупый вопрос, но что подрозумевается под словами "смены состояний, между которыми переход выполняется средствами css". Заранее спасибо

[Q4Dizzy]

Например при клике или наведении на одну область добавится класс элементу в другой области (js).. А там уже для этого класса написана анимация на css.

 

Ну и смотря, будет поддерживаться ie 9 и ниже...

Edited December 21, 2015 by Q4Dizzy

[abrahadabra]

Вот пример моей относительно недавней работы, где присутствует анимация. Там можно посмотреть, начиная с третьей секции. По нажатию на кнопку «далее», меняется кадр. Вот эта самая смена осуществляется средствами JS. В этом смысл такой, что это какая-никакая интерактивность. Реакция на действия пользователя. А вот сама смена кадров — это скорее к оформлению относится. В любом случае меняется видимость, положение, прозрачность элементов, просто меняется плавно. В css для этого все средства есть. Достаточно назначить начальное и конечное положение, длительность и функцию анимации — и браузер с этим справится.

Всё то же самое почти можно сделать средствами JS, но! Каждый элемент будет менять свои свойства не менее 30 раз в секунду. Скрипт будет высчитывать новые свойства и назначать их элементу DOM. Как известно, работа с DOM — это самое тормозное, что есть в JS.

Так зачем?

Ну и смотря, будет поддерживаться ie 9 и ниже...

Если есть требования поддержки ископаемых, то без вариантов, только JS.

Но тут какой момент. В доисторических браузерах JS-машинка вообще не рассчитанная на сколько-нибудь серьёзные действия, а потому тормозная. Анимация на JS будет их тормозить ещё больше. Давайте не будем зверьми, не надо мучать трупы.

Правильно делать анимацию на css, на js только смену состояний, а если браузер не умеет анимацию, но его поддержка необходима, то пусть он меняет состояния без анимации. Адекватный заказчик поймёт эти соображения.

[Q4Dizzy]

Ну тут спорить не буду... Анимация у меня слабая часть)) её не оч знаю и редко пользовался.. (css)

[VIVA]

Ребят, спасибо большое за пояснения! Оказалось с точностью до наоборот, от моих первоначальных суждений

Немного, подсумирую. Если нам нужно сделать анимацию как движение картинки (голуби машут крыльями, вертолеты летают и т.д) , то это лучше делать в CSS, а если нам нужно создать эффект слайдера (перемещение блоков с изображениями) или на действие пользователя мы должны вывести новые блоки (к примеру форму для выбора) тогда уже лучше использовать JS.

[Q4Dizzy]

Ну не совсем.. Слайдер - это готовый велосипед.. Тут зависит от того, какой выберете..

 

Есть слайдеры, которые управляют анимацией через css.

 

Есть слайдеры, которые управляют через animate (ширина, положение и т.д.) В основном смотрится по ситуации.. НО. ещё раз, всё зависит от ситуации, заказа, требований и т.д.

[VIVA]

Спасибо за дополнение! Идею я понял (настолько, насколько позволяют знания).  Остаеться самая "малось" - практика

[abrahadabra]

… если нам нужно создать эффект слайдера (перемещение блоков с изображениями) или на действие пользователя мы должны вывести новые блоки (к примеру форму для выбора) тогда уже лучше использовать JS.

почти, да не совсем.

Сама анимация смены изображений должна быть в css. А вот реагировать на действия пользователя css не умеет, и не надо ему такого уметь.

Нажатие на кнопочку обрабатывать должен js, у блоков на это действие меняются классы. А вот для самих классов уже анимации. Например:

.slider  position: relative  +size(100%, 200px)  &__slide    position: absolute    top: 0    left: 0    +size(100%)    transition: transform .5s ease    &--left      transform: translate(-100%, 0)    &--right      transform: translate(100%, 0)

всем элементам, кроме активного, даём классы с модификаторами, и от этого свойство transform: translate будет меняться.

Вот так и сочетаем.

[VIVA]

Что-то запутался.
 

А вот реагировать на действия пользователя css не умеет

А как же :hover, :active и т.д. по идее мы же можем прицепить анимацию на эти действия или это не совсем правильно ?

Edited December 21, 2015 by VIVA

[abrahadabra]

на псевдоклассы конечно можно назначить анимацию. И обычно так и надо делать. Когда такое лучше делать в js — это очень редкие, практически единичные экзотические случаи.

[VIVA]

Вот теперь понял, Спасибо большое!   

[Sergey_K_2015]

Хотелось бы немного дополнить тему. Использование по-максимуму возможностей CSS рекомендуется еще и в контексте повышения отказоустойчивости клиентских интерфейсов. Т.е. в этой концепции страница должна сохранять максимально адекватное отображение в случае отключения у клиента JS. Правда, совсем без JS обойтись далеко не всегда получится.

[VIVA]

@Sergey_K_2015,  Да, вот это тоже важная штука. Спасибо!