CSS анимация на сайте посредством библиотеки Animate.css

Здравствуйте дорогие друзья! Сегодня поговорим на очень актуальную тему в верстке — анимация. Честно сказать такое видел в интернете, и я даже не подозревал, что это все возможно используя чистый css3 без использования java скриптов. Вот в данной статье хочу поделиться с вами как сделать различные эффекты на сайте, используя css3, не обладая при этом достаточными знаниями в css-анимации. Поможет нам в этом библиотека animate.css.

До сих пор анимацию в css, вернее стили для анимации писал сам, пользуясь различными справочниками, типа htmlbook.ru. Но однажды наткнулся на сайт https://daneden.me/animate, где собраны уже готовые различные эффекты на css. Бери и применяй.

Для нашего выбора имеется две версии данной библиотеки:

Полная версия — имеет огромное количество строк кода. Подойдет тем, кто хочет детально изучить анимацию, поскольку код легко читаем. Объем файла составляет ~60 Кб.

Сжатая версия (обфусцированная) — представляет собой полную версию, но сжатую до минимума. Сжатие происходит за счет вырезания символов табуляции, пробелов, переносов строк, комментариев. Объем сократился почти в полтора раза, но разобраться в коде будет очень затруднительно. Объем файла составляет ~50 Кб.

Как вы заметили, проект добавлен на GitHub.

Итак, как же заставить анимацию работать после скачивания файлов? Все, что нам необходимо это подключить файл стилей

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

и добавить нужному блоку два класса — animated и второй класс в зависимости от того, какой эффект используете.

<div class="logo animated slideInLeft"> Логотип сайта </div>

Давайте посмотрим на пример. В данном случае я использовал анимацию — slideInLeft.

Я использовал один эффект, поэтому мне хватило кусочка кода, который отвечает именно на данную анимацию. Я скачал на GitHub все файлы данной библиотеки и подключил из папки «Source» нужный мне эффект, далее в свой файл стилей я добавил следующий код:

/*************** ANIMATED ****************/
.animated {
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}

Можно конечно было просто скомпилировать нужные эффекты в один файл и подключить только его, но мне почему то так удобнее.

Можно также задать эффект и при наведении курсора мыши.

Достаточно было добавить псевдокласс «hover» классу используемого эффекта:

.pulse:hover {
    -webkit-animation-name: pulse;
    -moz-animation-name: pulse;
    -o-animation-name: pulse;
    animation-name: pulse;
}

Также можно используя java скрипт, сделать так, чтобы при наведении курсора класс добавлялся, а при отводе мыши снова удалялся. Здесь придется еще подключить дополнительно библиотеку jQuery, но если она у вас уже подключена, то второй раз подключать ее не нужно.

Можно также совместить несколько эффектов. Вот что получилось:

Вы можете самостоятельно регулировать по своему вкусу время задержки и анимации:

.animated {
-webkit-animation-duration: 1s; /* Время анимации */
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;

-webkit-animation-delay: 1s; /* Время задержки */
  -o-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

Вот такие чудеса можно творить с помощью небольшой библиотеки animate.css. Она значительно упрощается жизнь верстальщику и здорово экономит время.

Ну что скажете коллеги? Как вам такой подход?