Анимация типа @keyframes + свойство animation позволяют сделать анимированный логотип или баннер, красивый слайдер или выпадающее меню. Для того чтобы облегчить процесс создания самой анимации, вы можете использовать библиотеку animate.css, автором которой является Daniel Eden. Всю информацию о ней на английском языке вы найдете на сайте animate.style. Там же можно протестировать все виды анимации. На момент написания статьи существует animate.css версии 4.1.1, и она несколько отличается от предыдущей версии наименованием классов и использованием в коде css-переменных.
Подключение animate.css
Для того чтобы подключить animate.css, необходимо указать в блоке <head> вашего html-документа ссылку на эту библиотеку на CDN:
| 1 2 3 4 | <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> </head> |
Второй способ - скачать css-файл с Github-репозитория (несжатый файл animate.css или минифицированный файл animate.min.css), разместить ее в папке css вашего проекта и подключить аналогичным способом:
| 1 2 3 | <head> <link rel="stylesheet" href="css/animate.min.css"> </head> |
Animate.css можно загрузить с помощью npm или yarn и импортировать в ваш проект:
| 1 2 3 4 5 | $ npm install animate.css --save $ yarn add animate.css //импорт в проект import "animate.css" |
Классы для добавления анимации
С помощью animate.css вы можете добавить ряд анимаций-заготовок, которые реализованы в этой css-библиотеке в виде классов. Для удобства пользования все классы разбиты на группы с названиями, например, Bouncing entrances и Bouncing exits. Если вы внимательно присмотритесь к названиям классов плюс нажмете на них и посмотрите на анимацию, то наверняка заметите, что классы, имеющие In в названии (bounceIn, например), показывают появление объекта с анимацией, а те, которые имеют Out ( bounceOut) в названии, нужны для исчезающих объектов.
Для того чтобы применить анимацию из набора Animate.css, вам нужно к тем блокам в html-разметке, которые анимируются, добавить класс animate__animated, который отвечает за проигрывание анимации в течение 1 секунды, а также любой из классов, которые отвечают за вид анимации, например, animate__fadeInRight или animate__zoomInDown.
| 1 2 3 | <div class="box animate__animated animate__pulse"><img src="images/pic1.jpg" alt="Dog"></div> <div class="box animate__animated animate__backInDown"><img src="images/pic2.jpg" alt="Girl"></div> <div class="box animate__animated animate__bounceIn"><img src="images/pic3.jpg" alt="Cat"></div> |
Примечание: вы можете скопировать название анимационного класса, нажав на иконку справа от него на сайте animate.style.
После загрузки страницы вы увидите сразу все ваши блоки, появляющиеся с выбранной анимацией. Запустите пример ниже для просмотра результата, нажав на кнопку "Run Pen".
Учтите, что изображения загружаются с внешнего ресурса unsplash.com, поэтому скорость их загрузки может быть больше времени воспроизведения анимации, и вы ничего не увидите. Перезапустите пример или откройте его на codepen.io, нажав на кнопку 
.
See the Pen by Elen (@ambassador) on CodePen.
Повторный запуск анимации произойдет после нажатия на кнопку "Rerun" в нижнем правом углу, т.к. анимация запускается одновременно для всех блоков после загрузки страницы (примера).
Классы animate.css для задержки анимации
В том случае, если вам нужно, чтобы блоки запускались с задержкой, необходимо использовать любой из 5 классов для задержки от 1 до 5 секунд:
| 1 2 3 4 5 | animate__delay-1s 1s animate__delay-2s 2s animate__delay-3s 3s animate__delay-4s 4s animate__delay-5s 5s |
Пример с задержкой анимации:
See the Pen animate.css with delay by Elen (@ambassador)on CodePen.
Если вам нужны другие значения задержек с одинаковым шагом, достаточно изменить значение css-переменной --animate-delay.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | /* Переменная для задания исходного значения задержки анимации */ :root { --animate-delay: 2s; } /* Изменяем начальное значение переменной */ :root { --animate-delay: 0.5s; } /* Использование переменной в классах с задержкой */ .animate__animated.animate__delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-delay: var(--animate-delay); animation-delay: var(--animate-delay); } .animate__animated.animate__delay-2s { -webkit-animation-delay: calc(1s * 2); animation-delay: calc(1s * 2); -webkit-animation-delay: calc(var(--animate-delay) * 2); animation-delay: calc(var(--animate-delay) * 2); } |
Классы animate.css для изменения скорости анимации
По умолчанию анимация в animate.css воспроизводится в течение 1 секунды. За это отвечает обязательный для использования в animate.css класс .animate__animated.
| 1 2 3 4 5 6 7 8 | .animate__animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; } |
Для того чтобы увеличить или уменьшить скорость анимации, можно использовать такие классы:
| 1 2 3 4 | animate__slow 2s animate__slower 3s animate__fast 800ms animate__faster 500ms |
Попробуем использовать разные значения анимаций для нового примера.
See the Pen animate.css fast/normal/slow by Elen (@ambassador) on CodePen.
Обратите внимание, что некоторые анимации имеют продолжительность менее 1 секунды. Вы можете изменить значение продолжительности анимации с помощью свойства --animation-duration глобально, задав ее для :root, или локально для любого элемента.
| 1 2 3 4 5 6 7 8 9 | /* Увеличение продолжительности всех анимаций вдвое */ :root { --animate-duration: 2s; } /* Уменьшение продолжительности анимации для элемента .my-element */ .my-element { --animate-duration: 0.5s; } |
Классы animate.css для повторения анимации
По умолчанию любая из представленных в animate.css анимаций проигрывается один раз. Для того чтобы изменить это, можно использовать такие классы:
| 1 2 3 4 | animate__repeat-1 1 раз animate__repeat-2 2 раза animate__repeat-3 3 раза animate__infinite infinite (бесконечно) |
В примере использован класс animate__infinite для <h1> и animate__repeat-3 для мяча. Для обоих элементов добавлено свойство animation-direction: alternate для того, чтобы анимация на четных повторениях проигрывалась от конца в начало.
See the Pen by Elen (@ambassador) on CodePen.
Учтите, что во многих классах Animate.css используется анимация со сдвигом относительно основной позиции элемента вправо или влево, поэтому на вашей странице в момент начала воспроизведения такой анимации будет появляться горизонтальная полоса прокрутки. Убрать ее можно, назначив свойство overflow: hidden для родительского элемента.
Анимация при скролле с помощью Animate.css и плагина wow.js
В том случае, если вам нужно, чтобы анимация запускалась только после того, как пользователь доберется до нужного места html-страницы с помощью скроллинга (полосы прокрутки), одной animate.css будет недостаточно. Проще всего воспользоваться для этого плагином WOW.js, который был написан еще в 2015 году, но работает до сих пор.
Подключение wow.js
Для того чтобы у вас срабатывала анимация при скролле, необходимо подключить не только Animate.css, но и файл плагина. Поскольку плагин написан на JavaSript, то после всей разметки перед закрывающим тегом </body> нужно разместить тег <script> с ссылкой на CDN:
| 1 | <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> |
Можно также скачать плагин wow.js с репозитория на Github и подключить из локальной папки js:
| 1 | <script src="js/wow.min.js"></script> |
После этого тега размещаем ниже еще один тег <script> с вызовом основной функции плагина:
| 1 2 3 | <script> new WOW().init(); </script> |
Добавление в разметку класса wow
Это еще не все . Для того чтобы код плагина сработал, нужно к анимированным блоками добавить еще один класса - wow.
| 1 2 3 | <div class="wow box animate__animated animate__pulse"><img src="images/pic1.jpg" alt="Dog"></div> <div class="wow box animate__animated animate__backInDown"><img src="images/pic2.jpg" alt="Girl"></div> <div class="wow box animate__animated animate__bounceIn"><img src="images/pic3.jpg" alt="Cat"></div> |
После этого плагин выполнит свою работу, т.е. будет отслеживать, где находится в данный момент полоса прокрутки, и запускать анимацию, когда появится нужный блок.
Смотрим на пример:
See the Pen animate.css wow.js by Elen (@ambassador) on CodePen.
Настройки плагина wow.js
У плагина wow.js есть свои настройки, которые можно задать в коде при вызове основной функции:
| 1 2 3 4 5 6 7 8 | let wow = new WOW({ boxClass: 'wow', // класс блока по умолчанию animateClass: 'animated', // класс анимации по умолчанию offset: 0, // смещение от нижнего края браузера по умолчанию mobile: true, // поддержка мобильных по умолчанию live: true // постоянно проверяйте наличие новых WOW-элементов на странице по умолчанию }); wow.init(); |
Также настройки можно задать с помощью data-атрибутов:
data-wow-duration="2s"– позволяет указать время проигрывания анимации. Значение указывается в секундах (s) или миллисекундах (ms). Заменяет классы с продолжительностью воспроизведения анимации типаanimate__slowв animate.css;data-wow-delay = "1.5s"– задает задержку перед проигрыванием анимации в секундах (s) или миллисекундах (ms). Заменяет собой классы задержек типаanimate__delay-2sв animate.css, но при этом вы устанавливаете свое значение;data-wow-offset="200"– количество пикселей от низа экрана до края элемента, когда включается анимация для него;data-wow-iteration="2"– количество повторов анимации. Заменяет классы для повторения анимации в animate.css.
Пример:
| 1 2 3 4 | <div class="wow animate__animated animate__flipInY" data-wow-offset="200" data-wow-delay="1.5s" data-wow-duration="2s"> <img src="images/pic1.jpg" alt="Cat"> </div> |
Все эти атрибуты не являются обязательными и указываются по мере необходимости. Если их нет, анимация будет проигрываться по умолчанию, как только элемент появится на экране при прокрутке окна браузера.
Пример анимации на странице с использованием wow.js
Автор Mike Samways
See the Pen wow mess around by Mike Samways (@msamways)on CodePen.
