logo

Библиотека 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.


Практические примеры 0

Рекомендую прочитать...

Анимация при скролле страницы
Анимация при скролле страницы

Как и было обещано в предыдущей статье «Бегущая строка на CSS3» сегодня рассмотрим работу анимации при прокрутке (скролле) страницы. Существуют различные способы для реализации данной проблемы. В статье рассмотрим 2 варианта решения. Они довольно простые и не вызовут затруднений при их реализации.

Читать полностью
Псевдоэлементы ::before и ::after
Псевдоэлементы

Из самого наименования предполагаем, что это вроде не настоящий элемент для верстки, а как бы подделка. Но эта «подделка» дорогого стоит.

Псевдоэлементы ::before и ::after ничего не изменяют в HTML-документе, их не существует и в дереве элементов документа.

Эти псевдоэлементы позволяют вставить на странице ту информацию, которой нет в HTML-коде.

Читать полностью
3D-трансформация в примерах
3d трансформация в примерах

В первом примере при наведении курсора на изображение как бы открывается обложка альбома, открывая скрытую, но «важную» информацию.
Второй пример — первоначально блоки с анонсом мы видим в перспективе, при наведении мышки блок принимает нормальный вид.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.