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