Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

20+ Бесплатных библиотек CSS анимаций

Сегодня мы рассмотрим лучшие библиотеки анимаций CSS, которые помогут вам создать потрясающие эффекты для различных элементов вашего сайта.
Несомненно добавляет движухи в интернет пространство, сайты где используются эффекты анимации, оживают поднимаясь на уровень выше, главное не переусердствовать, а использовать анимацию там где она будет выглядеть логично, не стоит навешивать эффектные плюшки на каждую закорючку интерфейса.
Наверняка, вы часто слышали термины «переход» и «трансформация»? Переходы CSS — это плавное изменение одного состояния элемента на другое, при наступлении определенного события, которое назначается соответствующим псевдоклассом, например при наведении :hover.

На данный момент мы можем использовать анимацию CSS для любых элементов, а также псевдоэлементов :before и :after. При этом, не стоит забывать, что, например, псевдокласс :hover не работает на некоторых мобильных устройствах, например, таких как iPhone или Android.

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


 

1. MOTION UI

Motion UI — это библиотека Sass для быстрого создания переходов и анимаций CSS, изначально связанная с Foundation for Apps, затем выделенная в отдельный проект, который был запущен раньше чем запустили Foundation for Sites 6.
При просмотре демо кликайте на класс и смотрите анимацию Yeti!
 
MOTION UI - Библиотека CSS-анимаций

 


 

2. Animista

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

 


 

3. Animate.css

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

 


 

4. Vivify

Vivify — Относительно новая и абсолютно бесплатная библиотека CSS-анимации. Работать с этой библиотекой очень просто, скачиваете, заливаете к себе на сайт, подключаете файл vivify.min.css к документу, добавляете класс vivify к элементу, который вы хотите оживить, здесь же прописываете имя класса соответствующего тому или иному виду анимации и всё, любуетесь результатом. Вся необходимая инфа по подключению и список имен классов упакована в архив.
 
Vivify - Бесплатная библиотека CSS-анимаций

 


 

5. Woah.css

Библиотека Woah.css позволяет применять эксцентричные, эффектные и в чём то даже сумасшедшие, анимации для любых элементов html. Подобно Animate.css, библиотека проста в использовании и легко модернизируется.
 
Woah.css

 


 

6. Hexa

Впечатляющая библиотека анимации css, простая и удобная в использовании. Добавьте жизни своему тексту, фотографиям и другим элементам вашего сайта, для этого просто введите магический класс
 
Hexa - Библиотека CSS анимаций

 


 

7. Magic Animations

Magic Animations — небольшая библиотека анимации специальных эффектов CSS3.
 
Magic Animation CSS3

 


 

8. CssAnimation

Cssanimation.io — Современная, управляемая библиотека эффектных анимаций CSS3, для работы с которой, достаточно базовых знаний HTML и CSS3. Подробнейшая документация представлена в репозитории проекта на GitHub.
 
CssAnimation - Библиотека CSS анимаций

 


 

9. CSShake

CSShake — это проект, полностью написанный в CSS, который обеспечивает серию довольно таки специфичных анимаций, в виде различных вариантов эффектов дрожи или тряски, применимых практически ко всем элементам DOM.
 
CSShake - Анимация CSS

 


 

10. All Animation Css3

Вся библиотека представляет собой фреймворк css3, созданный с упором на анимацию 3D и кросс-браузерность. Недавно было выпущено обновление всей библиотеки анимации, в которую были добавлены несколько новых анимированных компонентов, выполненных в CSS3 / Stylus.
 
All Animation Css3

 


 

11. Effeckt.css

Большая библиотека эффектных переходов и анимаций CSS, для различных элементов сайта.
 
Effeckt.css

 


 

12. Tuesday

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

 


 

13. Morf.js

JavaScript библиотека, позволяющая воспроизводить переходы CSS3 с аппаратным ускорением и с настраиваемыми пользовательскими функциями.
 
Morf.js - Анимация CSS

 


 

14. Ceaser

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

 


 

15. VHS.css

Описание
 
VHS.css - Анимация CSS

 


 

16. ReboundGen

Генерирует ключевые кадры анимации элемента в SASS / CSS3 используя Rebound.js от Facebook. Похоже на Animate.css.
 
ReboundGen - Генератор анимации CSS

 


 

17. WickedCSS

Не большая библиотека анимации CSS3. библиотека включает в себя набор эффектных анимаций, которые применимы к разным элементам веб-сайта.
 
WickedCSS - Анимация CSS

 


 

18. tScroll

Современная библиотека анимаций элементов при прокрутке страницы, с удобными опциональными настройками. Уверенная поддержка всеми современными браузерами.
 
tScroll - Библиотека анимаций CSS

 


 

19. Motion CSS

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

 


 

20. Rocket

Rocket — простой инструмент для создания веб-анимаций. Создает анимацию перехода из одного элемента в другой. Вся необходимая документация по работе с библиотекой прилагается.
 
Картинка

 


 

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>