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

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

Свойство clip-path
clip-[ath

Свойство clip-path можно применять ко всем элементам HTML, а также графическим элементам SVG и элементам-контейнерам SVG. Оно позволяет «обрезать» элемент практически любой формы. Это может быть отсечение прямоугольной формы, в виде круга или овала, а также фигура произвольной формы — много-много-многоугольник.

Читать полностью
Фильтры CSS3
Фильтры CSS

С помощью CSS фильтров можно создавать на сайте различные красивые эффекты , и их можно применить к любому элементу сайта.
CSS фильтры дают замечательные эффекты сайту, но к сожалению, негативно влияют на его производительность, поэтому не стоит ими злоупотреблять.

Читать полностью
Оформление кнопок на сайте
Кнопки для сайта

Продолжаем публикацию оформления кнопок для сайта. Сегодня рассмотрим кнопки с изменением внешнего вида при наведении в виде шторок и анимации текстового содержимого.

Как обычно, внешнее оформление, размеры, содержимое каждый выбирает сам, здесь задается только описание самого эффекта.

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

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

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

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