Сегодня веб сайты все больше переходят на использование новых технологий. Статичные картинки остаются как пережитки прошлого и на смену им приходит анимация. Есть два подхода к созданию анимации: javascript и CSS. Оба имеют свои сильные стороны и ограничения.
Создание анимации с помощью CSS отлично подходит для приложений где Вы используете маленькие, автономные элементы пользовательского интерфейса. К примеру, можно использовать анимацию для создания всплывающей подсказки или красиво убрать навигацию из области видимости. Самые передовые возможности есть у браузеров на движке Web-Kit , коими являются большинство десктопных и мобильных браузеров в наши дни.
Простой способ добавить движение в Ваш дизайн - это использовать свойства CSS transitions или keyframes.
С помощью CSS Вы определяете какую анимацию возможно использовать в зависимости от целевого элемента.
Замечательный пример CSS-анимации:
Посмотреть демо
Создание анимации с помощью javascript является более сложным, чем когда мы используем CSS, но с этой сложностью приходит большая мощность, когда мы научимся использовать все возможности этого потрясающего языка.
Есть много популярных библиотек с помощью которых легко создать анимацию:
Все перечисленные выше библиотеки хороши, но если выбирать самую лучшую то пожалуй я бы выбрал GreenSock в контексте использования её для демонстрации анимации.
Почему именно GreenSock?
Посмотрите на этот образец красивой анимации разработанной с использованием javascript и Greensock.
Посмотреть демо
Используйте анимацию для приятного взаимодействия с интерфейсом ваших сайтов или для WOW эффекта потрясающего дизайна. Экспериментируйте и совершенствуйте Ваши креативные навыки. Нет предела совершенству!