Блог

Лучшие библиотеки для CSS анимации

21 декабря 2022

Рассмотрим самые лучшие библиотеки для анимации CSS, которые используются верстальщиками в данный момент. Независимо от того, что вы ищете, — чистоту, простоту или веселье и причудливость, вы обязательно найдете нужную библиотеку для себя.

CSS анимация
CSS анимация

1. Animate CSS

Официальный сайт — animate.style

Animate CSS — это одна из самых используемых библиотек для кроссбраузерной анимации. Отлично подходит для расстановки акцентов, используется на посадочных страницах, для слайдеров и подсказок, который призваны привлечь внимание.

Чаще всего Animate CSS применяется к заголовкам, когда нужна анимация при прокрутке страницы в данную область.

Но у этой библиотеки есть хитрости по использованию, которые не сразу очевидны. Основная особенность состоит в том, что анимация не активируется при прокрутке экрана и в руководстве про это не ни слова.

Для того, чтобы это реализовать, нам нужно использовать дополнительную мини-библиотеку WOWjs. На сайте WOWjs есть описание того, как нужно ее применять для Animate CSS. Но и там не описано всё до конца верно. Для использования нам нужно прописать примерно следующее:

<script src="/js/wow.min.js"></script>
    <script>
        const wow = new WOW({
        boxClass: 'wow',
        animateClass: 'animate__animated',
        offset: 30,
        mobile: true,
        live: true
        })
        wow.init();
    </script>

Но и в данном случае у вас может начать анимационный эффект дублироваться, что убирается добавлением следующих строчек в CSS:

.wow {
   visibility: hidden;
 }

После этого всё заработает как надо.

2. Animatopy

Официальный сайт — sarthology.github.io/Animatopy

Суть простая — мы на сайте формируем сниппеты для CSS и HTML и просто добавляем фрагменты CSS-анимации в наши файлы.

Сюда входят много эффектов — bounce, flash, pulse, rubberBand, shake, swing, tada, wobble, jello, heartBeat, bounceIn и многие другие.

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

3. Magic Effects

Официальный сайт — minimamente.com/project/magic

Magic CSS — это набор простых анимаций для включения в ваши веб-проекты или приложения.

Magic CSS

4. Animista

Официальный сайт — animista.net

Animista — это библиотека CSS-анимации и место, где вы можете поиграть с коллекцией готовых CSS-анимаций и скачать только те, которые вы будете использовать. Очень много вариантов всяких эффектов.

5. Animation Library

Официальный сайт — animation.kaustubhmenon.com

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

6. Hamburgers

Официальный сайт — jonsuh.com/hamburgers

Гамбургеры (Hamburgers) — узконаправленная библиотека, которая предназначена для создания интерактивного элемента управления меню. Это коллекция из 10+ примеров CSS-анимаций гамбургеров, которые очень хорошо подходят для навигации на мобильных устройствах или в мобильных версиях сайтов.

Гамбургеры (Hamburgers)
Гамбургеры (Hamburgers)

7. Whirl

Официальный сайт — whirl.netlify.app

Whirl — это еще одна узконаправленная библиотека CSS анимации. Это подборка CSS-анимаций для, так называемых, прелоадеров (элементов загрузки). В ней уже есть 106 различных прелоадеров на любой вкус.

8. Wicked CSS

Официальный сайт — kristofferandreasen.github.io/wickedCSS

Библиотека достаточно большая и можно в ней найти почти всё необходимое. После чего скачиваем файл CSS и мы готовы начать добавлять анимацию к своему контенту с помощью простых классов.

9. Three Dots

Официальный сайт — nzbin.github.io/three-dots

Three Dots — это еще один набор CSS-анимаций для прелоадеров, сделанных с помощью всего одного элемента. Авторы проекта заявляют, что он поможет не только улучшить ваши навыки CSS, но и усовершенствовать ваше воображение.

Three Dots
Three Dots

10. CSShake

Официальный сайт — elrumordelaluz.github.io/csshake

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

11. VOV CSS

Официальный сайт — vaibhav111tandon.github.io/vov.css

В эту библиотеку CSS включено несколько функций, в том числе затухание, масштабирование, прокручивание, встряхивание, повороты, размытие, скатывание и скольжение (fades, zooms, wheels, shakes, swivels, blurs, rolls, slides). Довольно простая и стандартная библиотека без излишеств.

VOV CSS
VOV CSS

12. Mimic CSS

Демо сайт — erictreacy.github.io/mimic.css
GitHub c описанием — github.com/erictreacy/mimic.css

Очень похожа на VOV CSS (см. выше). В отличие от фреймворков, Mimic CSS — это инлайн CSS и работает довольно хорошо и в наборе есть ряд нестандартных анимационных эффектов.

На ГитХабе есть документация по работе с данной библиотекой и таблица эффектов.

Опубликовано 21 декабря 2022 в 17:00
Обновлено 10 августа 2024 в 10:41
Категория: Блог
Теги:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Реклама

Связь со мной

uzabila@yandex.ru