Здравствуйте дорогие друзья! Сегодня поговорим на очень актуальную тему в верстке — анимация. Честно сказать такое видел в интернете, и я даже не подозревал, что это все возможно используя чистый 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. Она значительно упрощается жизнь верстальщику и здорово экономит время.
Ну что скажете коллеги? Как вам такой подход?