5 библиотек для создания ярких CSS эффектов

Animate.css

Animate.css – набор из более чем 60-ти CCS эффектов, разработанный Даниэлем Эденом - дизайнером Dropbox. Работа Даниэля Идена над Animate.css стала источником вдохновения для создателей некоторых других библиотек CSS эффектов, представленных ниже.

• Лицензия - MIT
• Демо
• Документация
• Страница на GitHub

Hover.css

Hover.css – это богатая коллекция из 48 CSS hover эффектов, созданная фронтэнд-разработчиком Яном Лунном. Одним из преимуществ этой библиотеки является то, что в архиве с библиотекой присутствует Sass-версия. В связи с растущей популярностью CSS-препроцессоров в последнее время это стало очень удобным для большинства веб-разработчиков, использующих их.

• Лицензия - MIT
• Демо
• Документация (уроки)
• Страница на GitHub

fancyInput

Библиотека fancyInput предоставляет возможность добавлять нестандартные CSS эффекты, которые срабатывают в процессе взаимодействия с полями веб-форм, такими как <input> и <textarea>. Эффекты проявляются в процессе заполнения полей пользователем.

• Лицензия - неизвестно
• Демо
• Документация
• Страница на GitHub

Magic

Magic – это коллекция интересных CSS3 эффектов. Проект был разработан Даниэлем Эденом, создателем библиотеки Animate.css в сотрудничестве с итальянским разработчиком, известным под псевдонимом miniMAC.

Используя Magic, вы с легкостью можете применять к элементам на страницах CSS анимацию и CSS преобразования с помощью jQuery (или другого JS-фреймворка, который вы предпочитаете). Это осуществляется добавлением обработчиков событий к целевым HTML-объектам на странице, а также добавлением или удалением специальных CSS классов библиотеки Magic в момент, когда происходит событие.

Например, у нас есть кнопка с идентификатором #submit-button, которая должна быть нажата пользователем только один раз. После этого кнопка должна быть удалена из DOM-дерева, причем это должно произойти с применением CSS анимации и преобразований, чтобы не вызвать у посетителя недоумения при исчезновении кнопки. Это легко можно реализовать с помощью Magic и jQuery.

JavaScript

	$('#submit-button').click(function(){
	  $(this).addClass('magictime vanishOut')
	});

• Лицензия - неизвестно
• Демо
• Документация
• Страница на GitHub

Effekt.css

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

Вы можете ознакомиться со статьей о 9 целях Effeckt.css и посмотреть видео-ролик на youtube, чтобы иметь представление о будущем развитии Effeckt.css.

• Лицензия - MIT
• Демо
• Страница на GitHub

В статье представлен далеко неполный список библиотек CSS эффектов. Я уверен, что не упомянул в ней некоторые довольно значимые проекты. Если вам известны другие интересные библиотеки с открытым кодом, не описанные в статье, вы можете рассказать о них в комментариях. Спасибо за внимание!

Оригинал статьи - http://sixrevisions.com/css/css-effects-libraries/