Долгое время разработчики были ограничены Flash-плеерами и GIF-файлами, когда им требовалось отобразить анимацию на веб-странице.
Однако введение ключевых кадров, переходов и свойств анимации в CSS3 значительно упростило создание и отображение абстрактных анимаций, которые приятны глазу. Обновление CSS3 позволяет создавать анимации и условно отображать их для различных псевдосостояний. (например, наведение, фокус и т. д.).
Создание анимаций с этими свойствами довольно просто. Сначала вы определяете keyframes правило, содержащее предпочтительную последовательность анимации:
@keyframes float {
0% {
transform: translate(0, 0px);
}
50% {
transform: translate(0, 15px);
}
100% {
transform: translate(0, -0px);
}
}Вы можете видеть, что мы определяем ключевой кадр с именем float, который при 0% потока анимации устанавливает свойство преобразования элемента на перемещение на 0%, при 50% — на перемещение на 15 пикселей по оси Y, а при 100% — обратно на 0%.
Затем мы можем применить этот поток ключевых кадров к элементу с помощью свойства animation:
.element {
animation: floating 3s ease-in-out infinite;
}
/* OR */
.element:hover {
animation: floating 3s ease-in-out infinite;
}Вы заметите, что для создания простой анимации float требуется много кода, а при работе над более сложными код становится еще длиннее. Библиотеки анимации по сути решают эту проблему, делая процесс добавления анимации на веб-страницы таким же простым, как добавление имен классов к соответствующим элементам.
В этой статье будут рассмотрены десять распространенных библиотек и платформ CSS-анимаций для различных типов анимаций, таких как простое движение, переходы элементов/страниц, анимация лайтбоксов, загрузчики, анимация страниц при прокрутке и многое другое. Мы рассмотрим их преимущества, ограничения и примеры кода, чтобы вы могли быстро начать работу.
Animate.css
Animate.css — одна из самых популярных библиотек CSS-анимаций, на момент написания статьи имеющая более 76 тыс. звезд на GitHub. Animate.css позволяет вам без усилий добавлять несколько диапазонов анимации в ваше веб-приложение, просто включив их имена классов в элемент, который вы хотите анимировать. Animate.css очень удобен для отображения анимации на странице, анимации на слайдерах и общей привлекающей внимание анимации.
Эта библиотека также включает дополнительные служебные классы, которые позволяют вам настраивать длительность анимации, скорость и повторять анимацию непосредственно из вашей разметки. Вы также можете интегрировать анимации, предоставляемые этой библиотекой, с собственным свойством ключевого кадра CSS и вызывать их непосредственно из вашего кода CSS.
Как использовать
Animate.css доступен как пакет npm, а также через CDN:
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>После включения URL-адреса CDN в раздел заголовка разметки вы можете начать вызывать доступные анимации из его списка, как показано ниже:
<div class="animate__animated animate__pulse">A pulse animated element</div>
<!-- using utility class -->
<div class="animate__animated animate__pulse animate__infinite">A pulse animated element</div>В первом примере мы создали div с анимацией пульса, которая будет анимироваться в течение 1 секунды по умолчанию, а во втором примере мы настроили анимацию пульса на бесконечный запуск с помощью animate__infiniteслужебного класса (который является эквивалентом CSS animation-iteration-count: infinite;). Вы можете узнать больше об Animate.css по ссылкам ниже.
Animista
Animista — это скорее платформа CSS-анимации, чем библиотека, поскольку она предоставляет анимацию по запросу, т. е. вы заходите на платформу, выбираете нужный тип анимации, и для вас мгновенно генерируется код ключевого кадра CSS-анимации.
На первый взгляд, типы анимаций, доступные на Animista, очень похожи на те, что предлагаются на animate.css, но, если углубиться, Animista предлагает гораздо больше полезных категорий анимации, особенно для анимации слов и фоновых элементов. И, когда вы будете готовы экспортировать код анимации, вы можете по желанию выбрать загрузку стандартного или минифицированного кода.
Как использовать
Как упоминалось ранее, вам не нужно загружать какие-либо пакеты или включать CDN на свой веб-сайт, чтобы начать использовать Animista; просто зайдите на их домашнюю страницу, выберите понравившуюся анимацию, настройте последовательность анимации по своему желанию, и код будет сгенерирован для вас мгновенно.
Вот GIF-анимация, демонстрирующая этот процесс:
Animation Library
Библиотеку анимации можно считать альтернативой Animate.css, поскольку они предлагают похожие категории анимации. Однако, в отличие от первой, библиотека анимации не предоставляет дополнительных параметров настройки, которые позволяют вам устанавливать предпочтительную продолжительность анимации, скорость или время.
Кроме того, исходные файлы библиотеки анимации разделены на отдельные классы — например, все варианты анимации затухания находятся в одном исходном файле, как и другие классы анимации.
Как использовать
После загрузки ZIP-файла, содержащего все доступные категории анимации, вы можете выбрать ссылку на любую из них и начать вызывать их связанные имена классов в вашей разметке. Вот пример ссылки rotate.cssи использования rotateUpRightстиля:
<head>
<link rel="stylesheet" href="path/to/rotate.css">
</head>
<body>
<div class="rotateUpRight">
This div will rotate up right.
</div>
</body>Magic CSS
Magic CSS — еще одна интересная библиотека анимации, которая предлагает еще более захватывающие анимации по сравнению с теми, что мы рассмотрели до сих пор. Анимации, предоставляемые этим пакетом, очень удобны для переходов страниц. Однако один из недостатков magic CSS заключается в том, что он не поддерживает мини-браузер Opera.
Как использовать
Использование Magic CSS также довольно просто. Вы можете начать, загрузив библиотеку из npm или просто загрузить ее исходный файл CSS и включить его в разметку веб-страницы. Затем вы можете начать вызывать из ее списка анимаций:
<head>
<link rel="stylesheet" href="https://raw.githubusercontent.com/miniMAC/magic/master/dist/magic.min.css">
</head>
<body>
<div class="magictime puffIn">
</div>
</body>lightGallery
lightGallery отличается от других библиотек анимации, о которых мы упоминали до сих пор, тем, что она специально разработана для создания изображений лайтбоксов. Изображения лайтбоксов, такие как показанное выше, — это изображения, которые при щелчке накладываются на текущий веб-сайт в модальной форме.
lightGallery — это универсальная библиотека, которая поддерживает видеофайлы, позволяет визуализировать медиа-активы в формате карусели и позволяет создавать пользовательские плагины для расширения или изменения ее функциональности. Также стоит отметить, что lightGallery — это не полностью чистая библиотека анимации CSS, поскольку для своей работы она использует JavaScript.
Как использовать
lightGallery доступен через npm/yarn, bower, а также обслуживается через CDN. Чтобы начать работу над традиционной веб-страницей, вы сначала включите ссылку CSS и JavaScript CDN на свою веб-страницу, как показано ниже:
<head>
<link rel="stylesheet" href="/path/to/lightgallery-bundle.css" />
</head>
<body>
<!--... -->
<script src="/path/to/lightgallery.min.js"></script>
</body>После этого вы создаете элемент, который будет выступать в качестве контейнера для всех изображений, которые вы хотите преобразовать в лайтбокс:
<div id="lightbox-container">
<a data-lg-size="1600-2400">
<img src="path/to/img" />
</a>
<a data-lg-size="1024-800">
<img src="path/to/img" />
</a>
</div>Наконец, вы инициализируете lightGallery через ранее созданный контейнер с помощью следующего скрипта:
lightGallery(document.getElementById("lightbox-container"), {
speed: 500
// ...
});lightGallery также интегрируется с другими фреймворками JavaScript, такими как React, Angular и Vue, что еще больше упрощает использование библиотеки с помощью компонентов и свойств.
Loading.io
Loading.io — это платформа, которая позволяет вам настраивать коллекцию богатых анимаций загрузки и экспортировать ваше творение в виде анимации ключевых кадров CSS, GIF, SVG или PNG-файла. Эти анимации особенно удобны для создания предзагрузчиков или отображения состояний загрузки асинхронных действий.
Loading.io предлагает больше, чем просто предзагрузчики; платформа позволяет анимировать текст и даже фоновые узоры. Они также предлагают дополнительную библиотеку loadingBar.js для прямого и интерактивного включения предзагрузчиков на веб-страницу.
Как использовать
Использование Loading.io похоже на Animista в том, что для начала не требуется никаких дополнительных пакетов. Вы просто заходите на их сайт, выбираете предпочтительный загрузчик, настраиваете по желанию, а затем экспортируете.
Skeleton Elements
Skeleton elements также можно отнести к категории предзагрузчиков. Однако они отличаются от типичных загрузчиков тем, что загрузчики скелетов имитируют структуру и внешний вид загрузки контента в серые блоки. Он указывает, какой тип контента загружается в каждом блоке, например, изображение, текст и т. д.
Skeleton elements — популярная библиотека, предоставляющая подобный тип функциональности, которая также доступна в качестве компонента для нескольких фреймворков JavaScript.
Как использовать
Библиотека элементов скелета доступна через npm и также обслуживается на CDN. Для простой веб-страницы вы можете включить ее CDN в раздел заголовка разметки, как показано ниже:
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/skeleton-elements.css" />
</head>Затем вы можете начать создавать скелетные загрузчики с помощью классов skeleton-textи skeleton-block:
<body>
<h3 class="skeleton-text">Placeholder Header</h3>
<p class="skeleton-text">
Lorem ipsum dolor sit amet consectetur adipiscing elit.
</p>
<div class="skeleton-block" style="width:30%; height:50px"></div>
</body>Вы также можете добавлять эффекты загрузки через skeleton-effect-EFFECT_NAMEкласс. Вот наш предыдущий пример, измененный с помощью эффекта волны:
<body>
<h3 class="skeleton-text skeleton-effect-wave">Placeholder Header</h3>
<p class="skeleton-text skeleton-effect-wave">
Lorem ipsum dolor sit amet consectetur adipiscing elit.
</p>
<div class="skeleton-block skeleton-effect-wave" style="width:30%; height:50px"></div>
</body>Micron
Micron — это библиотека микровзаимодействий, управляемая JavaScript, созданная с помощью CSS-анимаций. Проще говоря, micron позволяет вам легко прикреплять несколько анимаций к элементам при щелчке по ним. Существуют также другие параметры настройки, которые помогут вам регулировать поток анимации.
Более того, вы можете привязывать и просто запускать анимацию из других элементов — например, у вас может быть элемент кнопки, активирующий анимацию, которую вы прикрепляете к другому div.
Как использовать
Начать работу с micron можно, включив в разметку исходный файл CDN CSS и Javascript, как показано ниже:
<link href="https://unpkg.com/[email protected]/dist/css/micron.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/script/micron.min.js" type="text/javascript"></script>Библиотеку затем можно использовать, добавив data-micronатрибут к вашим элементам. Вот пример того, как включить взаимодействие с отскоком:
<div data-micron="bounce">Click to bounce</div>Animxyz
Animxyz — еще одна простая в использовании библиотека анимации взаимодействия CSS, которая позволяет настраивать ее с помощью атрибутов. Вы можете выбирать из множества вариантов анимации и легко интегрировать ее с другими фреймворками JavaScript, включая React и Vue.
Эта библиотека также была создана с помощью SCSS, что позволяет использовать ее по-разному, так что вы можете легко настроить исходный код библиотеки по своему вкусу.
Как использовать
Вы можете установить эту библиотеку с помощью npm, импортировать ее основные SASS-миксины и настроить по желанию. Или вы можете просто включить ее ссылку CDN в раздел head вашего HTML-файла:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/core">И вы можете начать добавлять анимации из его списка, используя xyzатрибут:
<div class="xyz-in" xyz="fade up big">I will animate in!</div>АОС
Animate on scroll (AOS) — еще одна увлекательная библиотека, которая позволяет анимировать элементы разметки во время их прокрутки. Библиотека предлагает предопределенные анимации, такие как затухание, переворот, масштабирование и т. д., и позволяет прикреплять их к пользовательским элементам, пока пользователи прокручивают их. Она также включает дополнительные параметры конфигурации, которые позволяют вам устанавливать предпочтительную длительность анимации, задержку и количество раз, когда она должна запускаться.
Более того, вы не ограничены использованием только анимаций, предоставляемых библиотекой; вы также можете прикреплять свои собственные анимации, созданные с помощью keyframeсвойства.
Как использовать
Для начала вам необходимо включить ссылку AOS CSS и JavaScript CDN на свою веб-страницу, а затем инициализировать библиотеку, как показано ниже:
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>Теперь вы можете начать анимировать элементы разметки при прокрутке, используя data-aosатрибут:
<div data-aos="fade-up">
This div will fade up when scrolled to
</div>Заключение
Хотя создание простых анимаций в Интернете довольно просто, это становится утомительным при работе над сложными. В этой статье мы рассмотрели десять библиотек CSS, предлагающих различные диапазоны анимации, чтобы помочь вам избежать стресса от изобретения велосипеда.
