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

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

Наши соц. сети: instagram, fb, tg

1. Animista

Animista

Animista - это одновременно и онлайн-генератор анимации, и библиотека, которая предоставляет следующие возможности:

Выбор и настройка анимации

На сайте представлен большой выбор различных анимаций. Здесь вы также можете настроить продолжительность, задержка и направление анимации. Что еще лучше, вы можете выбрать объект, который хотите анимировать: простой центрированный блок, символ , фон или изображение.

CSS-код

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

2. Animate CSS

Animate CSS

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

❮div class="animated slideInLeft"❯❮/div❯

Javascript

document.querySelector('.my-element').classList.add('animated', 'slideInLeft')

JQuery

$(".my-element").addClass("animated slideInLeft")

Дополнительные функции

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

❮div class="animated slideInLeft slow|slower|fast|faster"❯❮div❯

3. Vivify

Vivify

Vivify можно считать улучшенной версией Animate CSS. В Vivify есть те же классы, что и в Animate CSS, но она расширена парочкой дополнительных.

❮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

Magic Animations CSS3

В этой библиотеке анимации есть несколько действительно хороших и плавных анимаций, особенно мне нравятся 3D. Нужно добавить magictime {animation_name} к элементу:

❮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

cssanimation.io - это набор из целого ряда различных анимаций (всего около 200).

Если вы не найдете здесь нужной анимации, то не найдете ее больше нигде.

Работает аналогично Animista. Например, вы можете выбрать анимацию и получить код прямо с сайта, или вы также можете загрузить всю библиотеку. Чтобы анимировать объект, добавьте cssanimation {animation_name}.

❮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 в head и le{animation_name} в текстовом элемент.

❮div class = "cssanimation leSnake"❯ ❮/div❯

Чтобы анимировать буквы по порядку, можно использовать класс sequence или класс random для анимации в соучайном порядке.

❮div class="cssanimation leSnake {sequence|random}"
❯ ❮/div❯

6. Angrytools

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

Angrytools

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

7. Hover.css

Hover.css

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

Для использования, просто добавляем класс:

❮button class = "hvr-fade"❯ Hover me!
❮/button❯

8. WickedCSS

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

Three Dots - это набор анимаций загрузки, созданных с помощью трех точек.

Нужно создать элемент div и добавить имя анимации.

❮div class = "dot-elastic"❯ ❮/div❯

10. CSShake

CSShake

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

Для использования понадобится только добавить к элементу shake {animation_name}

❮div class = "shake shake-hard"❯ ❮/div❯

Javascript

document.querySelector('.my-element').classList.add('shake','shake-hard')

JQuery

$(".my-element").addClass("shake shake-hard")

Приятного кодинга!