CSS3 анимация c помощью animate.css

1594
views

animate.cssНаверняка каждый из вас хотя бы раз встречал сайт, в котором по мере скролла появляются элементы с различными css3 анимациями. Для реализации таких эффектов и приданию динамичности сайту в целом можно использовать библиотеку animate.css. О том как ее использовать я расскажу далее.

Установка

Подключить к проекту библиотеку можно различными способами:

Установить с помощью bower

bower install animate.css --save

 Подключить через cdn

<head>
  <link rel="stylesheet" href="http://s.mlcdn.co/animate.css">
</head>

Загрузить библиотеку из репозитория.

Ссылка на github проекта.

Работа с анимациями

Принцип работы очень прост. Сначала к элементу нужно добавить класс определенного эффекта. Затем при добавлении к элементу класс animated будет воспроизведена анимация.

Список анимаций, которые присутствуют в библиотеке:

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

Также присутствует еще один класс infinite, который будет воспроизводить анимацию элемента в цикле.

Вот пример элемента с зацикленной анимацией:

<div class="animated infinite bounce">Пример</div>

Следует обратить внимание, что бы работала анимация у элемента стиль display должен быть: block или inline-block.

С принципом работы анимации понятно, но если просто вывести элемент с этими классами, анимация воспроизведется сразу, как только будет загружена страница в браузере. Как же воспроизводить анимацию элемента в определенный момент?

JS функция воспроизведения css анимации

Задачей является добавлять класс animated в определенный момент и удалять его по завершению анимации. Если вы используете jQuery, то реализовать это можно следующим образом:

$.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
});

Теперь остается лишь вызывать ее в необходимый для нас момент (например по скроллу).

$('#elementID').animateCss('bounce');

//Параметром функции может быть любая анимация

Для изменения продолжительности или задержки анимации можно прописать дополнительные свойства для элемента:

#elementID {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
}

Заключение

Работа с библиотекой очень проста и с помощью данной функции можно решить большинство задач появления и исчезания элементов.

Также можно собрать собственную сборку библиотеки, включив в нее только необходимые для проекта анимации. Для этого необходимо скачать с репозитория исходник и собрать билд с помощью таск-менеджера gulp.


Если вам полезен данный материал, подписывайтесь на мой блог, чтобы получать уведомления о новых публикациях на темы: верстки, javascript и разработки кроссплатформенных мобильных приложений.

Подписаться на блог по эл. почте