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

0
925

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

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

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

Список библиотек

  1. Animista
  2. Animate CSS
  3. Vivify
  4. Magic Animations CSS3
  5. Cssanimation.io
  6. Angrytools
  7. Hover.css
  8. WickedCSS
  9. Three Dots
  10. CSShake

1. Animista

Animista
Animista

На самом деле этот сайт я обнаружил не так давно. но сразу же в него влюбился. Честно говоря я считаю, что он один заслуживает отдельного поста.

Выбор анимации

Вы можете выбрать какой тип анимации вам нужен (например анимация появления или исчезания элемента), кроме того что вы можете выбрать определенный вид анимации (например scale-in), вы также можете выбрать еще и различные варианты для этой анимации (например scale-in-right).

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

Настройка

Animista также дает нам возможность настраивать и такие свойства анимации как:

  • продолжительность (duration)
  • задержка (delay)
  • или направление анимации

И что еще лучше, вы можете выбрать объект который нужно анимировать.
Это может быть:

  • простой центрированный блок
  • отдельный символ
  • фон
  • или даже изображение

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

Получение CSS кода

После того, как вы выбрали анимацию, настроили ее так как вам нужно, вы можете получить готовый код прямо с сайта. Также есть возможность сразу минифицировать свой код.

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

Скачивание выбранной анимации

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

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

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

2. Animate CSS

2. Animate 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>

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

3. Vivify

3. Vivify
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с.

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

4. Magic Animations CSS3

4. Magic Animations CSS3
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")

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

5. Cssanimation.io

5. Cssanimation.io
5. Cssanimation.io

Cssanimation.io — это коллекция огромного количества различных анимаций, наверное около 200 штук и от этого просто захватывает дух.

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

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

Для запуска добавляем класс 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

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

Random

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

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

6. Angrytools

6. Angrytools
6. Angrytools

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

Этот сайт, так же как и многие предыдущие, предоставляет нам возможности для настройки продолжительности или задержки анимации. Но в нем есть возможность самому добавлять ключевые точки (keyframes) на так называемую временную шкалу, а затем писать код прямо там. Кроме того, вы можете редактировать уже существующие ключевые точки.

Когда вы закончите делать анимацию, вы сможете скопировать код или же скачать его.

7. Hover.css
7. Hover.css

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

Это коллекция CSS3-эффектов которые активируются при наведении, и которые можно применить к ссылкам, кнопкам, логотипам, SVG, выбранным изображениям и т.д.

У них есть действительно удивительные анимации. Более того, в hover.css также есть классы для анимации иконок, например, font awesome.

Использовать hover.css очень просто. Надо просто добавить нужный класс к вашему элементу. Например так:

<button class="hvr-fade">Hover me!</button>

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

8. WickedCSS

8. WickedCSS
8. WickedCSS

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

<div class="bounceIn"></div>
//Javascript
document.querySelector('.my-element').classList.add('bounceIn')
//Jquery
$(".my-element").addClass("bounceIn")

 

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

9. Three Dots

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

Для запуска просто создаем элемент div и добавляем название анимации

<div class="dot-elastic"></div>

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

10. CSShake

10. CSShake
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")

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

источник