Использование Animate.css



Влад Мержевич

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

1. Для начала следует скачать и подключить библиотеку. Есть три варианта.

  • Полная версия. Содержит более трёх тысяч строк кода объёмом около 60 кБ. Она хорошо подходит на первом этапе ознакомления с анимацией в целом, поскольку позволяет взглянуть, как это всё устроено.
  • Упакованная версия (обфусцированная, говоря профессиональным языком). В css-файле нет табуляции, пробелов и переносов строк. Объём файла за счёт этого сокращается раза в полтора, но читать код при этом становится затруднительно.
  • Выборочные эффекты. Лучше всего подходит для большинства задач, поскольку позволяет указать только понравившиеся эффекты, избавившись от лишнего.

Далее подключаем файл animate.css через тег <link> как это делается с любым другим стилевым файлом.

<link href="animate.css" rel="stylesheet">

2. Чтобы применить эффект анимации к желаемому элементу, добавляем к нему два класса — animated и класс с названием эффекта, допустим fadeInDown (список всех эффектов и их названия смотрим здесь). Например, вы желаете добавить мерцание ко всем изображениям на странице. В HTML записываем следующее:

<img src="images/figure.jpg" alt="Винни-Пух" class="animated flash">

Если на сайте используется jQuery, то добавление классов упрощается и делается через JavaScript.

<script> 
$(document).ready(function() {
  $('img').addClass('animated flash'); 
})
</script>

3. Сама анимация включается автоматически при загрузке страницы. Это удобно для всплывающих сообщений, призванных привлечь внимание пользователя (пример 1).

Пример 1. Всплывающее сообщение

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Предупреждение</title>
  <link href="style/animate.css" rel="stylesheet">
  <style>
   .warning {
    background: #fc0;
    padding: 10px;
    border: 1px solid #000;
   }
  </style>
 </head>
 <body>
  <div class="animated fadeInDown warning">
   Зенитное часовое число оценивает экваториальный секстант!
  </div>
 </body>
</html>

Чтобы эффект срабатывал при наведении на элемент курсора мыши, придётся использовать JavaScript. В качестве примера рассмотрим картинки, которые двигаются при наведении на них курсора мыши. К тегу <img> добавляем класс animated и подключаем jQuery (пример 2).

Пример 2. Галерея

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Галерея</title>
  <link href="style/animate.css" rel="stylesheet">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script>
   $(document).ready(function() {
    $('img.animated').hover(
     function() {
      $(this).addClass('bounce'); // Добавляем класс bounce
     },
     function() {
      $(this).removeClass('bounce'); // Убираем класс
     }
    )})
  </script>
 </head>
 <body>
   <img src="images/thumb1.jpg" alt="" class="animated">
   <img src="images/thumb2.jpg" alt="" class="animated">
   <img src="images/thumb3.jpg" alt="" class="animated">
 </body>
</html>

В данном примере при наведении курсора на изображение с классом animated добавляется ещё один класс bounce; если курсор убрать, то класс bounce также убирается.

4. Окончательно можно настроить анимацию по своему вкусу, изменив скорость анимации, а также задав время задержки через CSS. И то и другое не обязательно и применяется при необходимости.

.animated {
  -webkit-animation-duration: .6s;
  -o-animation-duration: .6s;
  -moz-animation-duration: .6s;
  animation-duration: .6s;
  
  -webkit-animation-delay: 1s;
  -o-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.