Сравнение анимации: CSS vs. JavaScript

Сегодня веб сайты все больше переходят на использование новых технологий. Статичные картинки остаются как пережитки прошлого и на смену им приходит анимация. Есть два подхода к созданию анимации: jаvascript и CSS. Оба имеют свои сильные стороны и ограничения.

 

Анимация с помощью CSS

 

Создание анимации с помощью CSS отлично подходит для приложений где Вы используете маленькие, автономные элементы пользовательского интерфейса. К примеру, можно использовать анимацию для создания всплывающей подсказки или красиво убрать навигацию из области видимости. Самые передовые возможности есть у браузеров на движке Web-Kit , коими являются большинство десктопных и мобильных браузеров в наши дни.

 Простой способ добавить движение в Ваш дизайн - это использовать свойства CSS transitions или keyframes. 

С помощью CSS Вы определяете какую анимацию возможно использовать в зависимости от целевого элемента.

 Замечательный пример CSS-анимации:

 

 Посмотреть демо

 

Анимация с помощью jаvascript

 

Создание анимации с помощью jаvascript является более сложным, чем когда мы используем CSS, но с этой сложностью приходит большая мощность, когда мы научимся использовать все возможности этого потрясающего языка.

 Есть много популярных библиотек с помощью которых легко создать анимацию:


 

 Все перечисленные выше библиотеки хороши, но если выбирать самую лучшую то пожалуй я бы выбрал GreenSock в контексте использования её для демонстрации анимации.

 

 Почему именно GreenSock? 

  • Анимацию сделать легко и интуитивно понятно
  • Работает и хорошо взаимодействует с другими (JQuery, HTML5, и т.д.)
  • Мощная
  • Уже содержит все необходимое для профессионального использования

 

Посмотрите на этот образец красивой анимации разработанной с использованием jаvascript и Greensock.

 

 Посмотреть демо

 

Используйте анимацию для приятного взаимодействия с интерфейсом ваших сайтов или для WOW эффекта потрясающего дизайна. Экспериментируйте и совершенствуйте Ваши креативные навыки. Нет предела совершенству!