Библиотека Animate.css

Главная › Практические примеры › Библиотека Animate.css

CSS3 поддерживает покадровую анимацию, которая позволяет создавать сложные анимации объекта. Существует возможность задавать множество параметров работы анимации при помощи свойства animation и правила @keyframen.

Но лучше воспользоваться готовыми решениями, которые позволяют анимировать любой объект. Для этого воспользуемся библиотекой Animate it.

Заходим на официальный сайт, выбираем в левой колонке вариант анимации и видим какой эффект вызывает данная анимация. Нажимаем на кнопку Animate it для того, чтобы повторно просмотреть.

Возможны 2 способа подключение данной библиотеки к своему сайту:

1. Скачиваем библиотеку, кликнув на Download Animate.css. Подключаем ее к своей странице на сайте


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

Не забываем указывать реальный путь к файлу

2. Подключаем внешний файл с библиотекой


<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

Пользоваться этой библиотекой очень просто:
Допустим вы хотите какой либо элемент заставить двигаться. Присваиваете этому элементу дополнительный класс с именем выбранной анимации.

Рассмотрим на примере:

Создадим блок с рисунком логотипа сайта


<div class="logo">
    <img src="images/logo.png" alt="Логотип">
</div>

Теперь, для того, чтобы добавить анимацию к блоку, нужно просто дописать класс animated и класс с названием анимации, в данном примере это — bounceInLeft.


<div class="logo animated bounceInLeft">
    <img src="images/logo.png" alt="Логотип">
</div>

Если еще добавить выбранному элементу класс infinite, то анимация будет повторятся бесконечно, что и сделано на примере ниже.

Вот таким образом добавляем анимацию к любому выбранному вами элементу.

При желании вы сами можете откорректировать ту или иную анимацию, внося изменения в файле «аnimate.css»

Все анимации размещены в скаченном файле. Но вы вряд ли будете использовать все анимации, в лучшем случае 2-3, поэтому есть смысл убрать из файла лишние, а может быть наоборот — выбрать необходимые анимации и вставить их в свой файл стилей

Тем самым увеличите свободное место на сайте

Вот так просто можно делать красивые анимации на любой странице сайта, используя уже готовую библиотеку Animate.css.