Библиотека для создания анимаций Animate.css

Порой создание анимаций может заставить нервничать даже опытного разработчика, что уж говорить про начинающего. К счастью, существует огромное множество библиотек для решения этой проблемы. Однако, чаще всего они слишком перегружены лишним функционалом и при проектировании небольшого веб-сайта мы тащим за собой кучу неиспользуемых функций и шаблонов. Animate.css будет хорошей альтернативой таким библиотекам - это минималистичное, кроссбраузерное и расширяемое решение.

Из этого урока вы узнаете:

• Как подключить Animate.css в свой проект?
• Как с помощью данной библиотеки создавать простые анимации?
• Как управлять скоростью анимации и её задержкой?
• Пару советов по использованию Animate.css

1) Как подключить Animate.css в свой проект?

Подключить Animate.css в проект можно несколькими способами: скачать с GitHub, встроить CDN ссылку на библиотеку, установить через пакетные менеджеры. Рассмотрим каждый из них:

• Скачать с GitHub

Ссылка на библиотеку:

https://github.com/animate-css/animate.css/blob/main/animate.css

Её минифицированная версия:

https://github.com/animate-css/animate.css/blob/main/animate.min.css

Скачав файл, необходимо его поместить в папку с проектом, и в теге link прописать путь до файла, если, конечно, он не лежит в корне проекта.

• Встроить CDN ссылку на библиотеку

В этом случае достаточно вместо пути указать ссылку на сервер, где хранится данная библиотека.

Ссылка на CDN: https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

• Установить через пакетные менеджеры

Можно установить через NPM или Yarn.

Установка через NPM: npm install animate.css --save

Установка через Yarn: yarn add animate.css

2) Как с помощью данной библиотеки создавать простые анимации?

Теперь, когда мы разобрались с базовыми настройками, перейдём к созданию анимаций. Создадим простенький шаблон, который мы будем анимировать.

Его HTML-код:

CSS-код:

А выглядит он вот так:

Чтобы добавить к полученному шаблону анимацию, достаточно добавить 2 класса:

Первый добавленный класс - animate__animated. Он необходим при добавлении любой анимации, этот класс означает, что данный элемент вёрстки будет анимирован. Второй добавленный класс animate__flipInY уже подразумевает вид анимации - мы выбрали flipInY.

Посмотрим, что получилось (gif):

Добавив всего 2 класса мы уже получили готовую анимацию - круто! Также можно определять анимации прямо в CSS:

Результат будет такой же, но немного длиннее. Какие ещё есть анимации? Все анимации можно найти и сразу же проверить на официальном сайте библиотеки: https://animate.style/

Советуем самостоятельно попробовать каждую анимацию.

3) Как управлять скоростью анимации и её задержкой?

Мы можем задавать произвольную задержку любой анимации, добавив CSS свойство animation-duration к нужному блоку.

Можно ещё сделать так:

Задание данных свойств через CSS делает HTML код более лаконичным. Однако, если вы хотите задавать все через HTML-классы, есть готовые классы для создания задержек и длительности анимации:

animate__delay-2s - задержка на 2 секунды

animate__delay-3s - задержка на 3 секунды

animate__delay-4s - задержка на 4 секунды

animate__delay-5s - задержка на 5 секунд

Есть также классы для задания скорости анимации:

animate__slow - 2 секунды

animate__slower - 3 секунды

animate__fast - 800мс

animate__faster - 500мс

Есть классы, задающие число повторов анимации:

animate__repeat-1 - один повтор

animate__repeat-2 - два повтора

animate__repeat-3 - три повтора

animate__infinite - постоянное повторение

4) Пара советов по использованию Animate.css

За неумением использования любой инструмент будет плохим. Вот несколько советов, как избежать падения производительности вашего сайта.

Используйте анимацию только там, где это действительно нужно

Когда разработчик впервые сталкивается с анимацией, он хочет заполнить ей чуть ли не каждый элемент вёрстки. В итоге страдает как скорость загрузки сайта, так и психика конечного пользователя. Всегда спрашивайте себя - действительно ли здесь нужна анимация, или же лучше обойтись без неё?

Не анимируйте слишком большие элементы

Практика показывает, что анимация на таких элементах только путает пользователя, а UX сайта сильно ухудшается. Подумайте, чем можно заменить анимацию. Особенно стоит избегать применения анимации на таких элементах, как html и body. Это может привести к малоизвестным ошибкам браузера и сбою работы сайта.

Избегайте использования бесконечных анимаций

В большинстве случаев такая анимация будет только отвлекать пользователя или, что ещё хуже - раздражать его. Попробуйте найти альтернативу бесконечным анимациям.

Очень надеемся, что после прочтения этой статьи вы сможете создавать простые анимации в своих проектах. Много практикуйтесь и всё получится!

До скорой встречи!

Ссылка на канал: https://t.me/sitodel