Сегодня для создания конкурентно-способного веб-ресурса приходится учитывать многое: начиная от интуитивно понятного дизайна страницы и заканчивая различными текстами, которые должны привлечь и удержать посетителя. Мы же в этой статье уделим внимание динамике, происходящей на страницах, которая стала неотъемлемой их частью. Если раньше для того, чтобы добавить какой-нибудь эффект нам приходилось использовать различные библиотеки или писать код на 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 анимаций.