Показать Меню
falbar Анимации на CSS3

Сборник анимации на CSS3

Анимации на CSS3

Сегодня для создания конкурентно-способного веб-ресурса приходится учитывать многое: начиная от интуитивно понятного дизайна страницы и заканчивая различными текстами, которые должны привлечь и удержать посетителя. Мы же в этой статье уделим внимание динамике, происходящей на страницах, которая стала неотъемлемой их частью. Если раньше для того, чтобы добавить какой-нибудь эффект нам приходилось использовать различные библиотеки или писать код на JavaScript, то сейчас лучший способ оживить сайт - это воспользоваться анимацией за счёт CSS3.

Современные браузеры – вот наша цель. Хотя, только представить себе, что первая работа над стандартом CSS3 началась аж в далёком 1998 году, и это через год после появления CSS2. Между тем далеко не все браузеры поддерживают полный объем возможностей CSS3, что весьма и весьма печально. Мы не будем делать акцент на любителей старых версий браузеров – это их личный выбор, а займемся рассмотрением CSS библиотеки animate.css. Рано или поздно стандарт войдет во 100% поддержку, а нам надо идти в ногу со временем.

Animate.css – файл, в котором описано множество CSS3 анимаций, а вызов их происходит путём добавления классов к нужным нам HTML элементам. Вариантов и в самом деле много, если Вы перейдёте на страницу демо, то увидите насколько.

Пользоваться CSS библиотекой очень просто, для этого подключим CSS файл:

<link href="animate.css" type="text/css" rel="stylesheet" />

Теперь добавляем HTML:

<h1 class="animated bounce">Анимированная запись на CSS3</h1>

К заголовку мы добавили два класса:

  • animated – этот класс добавляем к элементу, к которому хотим добавить анимацию;
  • bounce – анимация, которая произойдёт (всего в библиотеке 74 вида, все примеры можно увидеть в демо).

А если добавить класс infinite, то анимацию можно зациклить, и она будет повторяться. Добавляя свои варианты и изменяя существующие, Вы с легкостью можете на базе animate.css создать свой сборник CSS3 анимаций.

Источник
github.com

Подписаться на обновления

Комментариев еще не оставлено