10 лучших библиотек для CSS-анимации
В этой статье, я покажу вам 10 лучших библиотек для CSS-анимаций, которые мне встречались на данный момент.
В целом я перепробовал около тридцати библиотек. Некоторые были совсем маленькими, другие же довольно большими, но в итоге я отобрал десять самых лучших на мой взгляд. Обратите внимание, что ни одна из этих библиотек, для своей работы, не требует обязательного подключения JavaScript.
Список библиотек
- Animista
- Animate CSS
- Vivify
- Magic Animations CSS3
- Cssanimation.io
- Angrytools
- Hover.css
- WickedCSS
- Three Dots
- CSShake
1. Animista
На самом деле этот сайт я обнаружил не так давно. но сразу же в него влюбился. Честно говоря я считаю, что он один заслуживает отдельного поста.
Выбор анимации
Вы можете выбрать какой тип анимации вам нужен (например анимация появления или исчезания элемента), кроме того что вы можете выбрать определенный вид анимации (например scale-in), вы также можете выбрать еще и различные варианты для этой анимации (например scale-in-right).
Настройка
Animista также дает нам возможность настраивать и такие свойства анимации как:
- продолжительность (duration)
- задержка (delay)
- или направление анимации
И что еще лучше, вы можете выбрать объект который нужно анимировать.
Это может быть:
- простой центрированный блок
- отдельный символ
- фон
- или даже изображение
Получение CSS кода
После того, как вы выбрали анимацию, настроили ее так как вам нужно, вы можете получить готовый код прямо с сайта. Также есть возможность сразу минифицировать свой код.
Скачивание выбранной анимации
Еще одна удивительная особенность в том, что вам может понравиться одна определенная анимация, которую вы можете выбрать и скачать только ее одну, без всего лишнего кода. Либо же скопировать код нескольких анимаций.
Но что еще лучше на этом сайте — это то, что он полностью адаптивен и если вы сейчас читаете эту статью с телефона, то вы можете сразу же попробовать его.
2. Animate CSS
Конечно же я не могу обделить вниманием Animate CSS, наверное одну из самых известных библиотек анимации. Рассмотрим вкратце ее использование.
Использование
Для запуска вам нужно добавлять класс animated элементу который вы хотите анимировать, а потом класс-имя анимации.
<div class="animated slideInLeft"></div>
//Javascript
document.querySelector('.my-element').classList.add('animated', 'slideInLeft')
//Jquery
$(".my-element").addClass("animated slideInLeft")
Если вы хотите зациклить анимацию, можно добавить класс infinite, чтобы анимация повторялась без остановки.
Дополнительные возможности
В Animate CSS есть несколько базовых классов для управления задержкой и скоростью анимации.
delay
Вы можете добавить задержку для своей анимации добавив класс delay
<div class="animated slideInLeft delay-{1-5}"><div>
speed
Также вы можете контролировать скорость анимации добавив один из перечисленных ниже классов
| Class name | Speed time |
| slow | 2s |
| slower | 3s |
| fast | 800ms |
| faster | 500ms |
<div class="animated slideInLeft slow|slower|fast|faster"><div>
3. Vivify
Vivify — это библиотека анимации, которую я всегда считал улучшенной версией Animate CSS. Она работает точно также, содержит такие же классы, но расширена еще несколькими. Вместо добавления класса animated, надо добавлять vivify.
<div class="vivify slideInLeft"></div>
//Javascript
document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')
//Jquery
$(".my-element").addClass("vivify slideInLeft")
Как и Animate CSS, Vivify также предоставляет классы для управления продолжительностью и задержкой анимации. Классы задержки и длительности доступны со следующим интервалом:
<div class="delay|duration-{100|150|200|250...1000|1250|1500|1750...10750}"></div>
Обратите внимание, что эти значения в миллисекундах. 1000мс = 1с.
4. Magic Animations CSS3
В этой библиотеке есть очень приятные и плавные анимации, особенно мне нравятся 3D анимации.
Но рассказывать мало, попробуйте сами поиграться с ними.
В этой библиотеке надо добавлять класс magictime и класс-название анимации.
<div class="magictime fadeIn"></div>
//Javascript
document.querySelector('.my-element').classList.add('magictime', 'fadeIn')
//Jquery
$(".my-element").addClass("magictime fadeIn")
5. Cssanimation.io
Cssanimation.io — это коллекция огромного количества различных анимаций, наверное около 200 штук и от этого просто захватывает дух.
Принцип работы аналогичен Animista. Например, вы можете выбрать анимацию и получить код прямо на сайте, а также можете загрузить и всю библиотеку.
Для запуска добавляем класс cssanimation и класс-название анимации своему элементу.
<div class="cssanimation fadeIn"></div>
//Javascript
document.querySelector('.my-element').classList.add('cssanimation','fadeIn')
//Jquery
$(".my-element").addClass("cssanimation fadeIn")
Вы можете добавить класс infinite если хотите, чтобы анимация была зациклена.
<div class="cssanimation fadeIn infinite"></div>
Кроме того, cssanimation.io предоставляет вам возможность анимации букв. Для этого вам понадобиться подключить файл letteranimation.js, а затем добавьте le{animation_name} текстовому элементу.
<div class="cssanimation leSnake"></div>
Для того, чтобы анимировать буквы последовательно добавьте класс sequence, чтобы анимировать их случайным образом добавьте класс random.
<div class="cssanimation leSnake {sequence|random}"></div>
Sequence
Random
6. Angrytools
Angrytools на самом деле является коллекцией различных генераторов, в том числе и генератор CSS. Возможно, он не такой разнообразный как Animista, но кое-что мне в нем очень понравилось.
Этот сайт, так же как и многие предыдущие, предоставляет нам возможности для настройки продолжительности или задержки анимации. Но в нем есть возможность самому добавлять ключевые точки (keyframes) на так называемую временную шкалу, а затем писать код прямо там. Кроме того, вы можете редактировать уже существующие ключевые точки.
Когда вы закончите делать анимацию, вы сможете скопировать код или же скачать его.
Hover.css включает в себя множество CSS-анимаций, которые, в отличие от приведенных выше, запускаются при каждом наведении на элемент.
Это коллекция CSS3-эффектов которые активируются при наведении, и которые можно применить к ссылкам, кнопкам, логотипам, SVG, выбранным изображениям и т.д.
У них есть действительно удивительные анимации. Более того, в hover.css также есть классы для анимации иконок, например, font awesome.
Использовать hover.css очень просто. Надо просто добавить нужный класс к вашему элементу. Например так:
<button class="hvr-fade">Hover me!</button>
8. WickedCSS
WickedCSS — это небольшая библиотека CSS-анимации, в ней не так уж много вариантов анимаций, но те, которые у нее есть — великолепны.
Используется просто — добавляем название анимации к вашему элементу и готово.
<div class="bounceIn"></div>
//Javascript
document.querySelector('.my-element').classList.add('bounceIn')
//Jquery
$(".my-element").addClass("bounceIn")
9. Three Dots
Three Dots — это набор CSS-анимаций для прелоадера, созданных из трех точек, которые, на самом деле, являются одним элементом.
Для запуска просто создаем элемент div и добавляем название анимации
<div class="dot-elastic"></div>
10. CSShake
И в конце у нас «шейкерный коктейль».
Как следует из названия, CSShake — это библиотека CSS-анимации, которая содержит различные типы анимаций встряхивания.
Для запуска добавляем класс shake и класс-название анимации своему элементу.
<div class="shake shake-hard"></div>
//Javascript
document.querySelector('.my-element').classList.add('shake','shake-hard')
//Jquery
$(".my-element").addClass("shake shake-hard")
