В CSS3 появилось множество новых свойств и модулей (таких как CSS Animations и CSS Transitions), которые позволяют добавлять привлекательную интерактивность на сайт.
Если вы хотите воспользоваться этими современными возможностями CSS, есть один быстрый способ сделать это. Вы можете использовать библиотеки CSS эффектов. Здесь вы найдёте несколько таких библиотек с открытым исходным кодом, которые помогут вам в разработке новых проектов или послужат источником вдохновения и генератором идей.
1. Animate.css
Animate.css является коллекцией из более чем 60 эффектов CSS. Автром которой является Daniel Eden, дизайнер в Dropbox. Работа Даниэля Идена Animate.css явилась источником вдохновения для некоторых других библиотек CSS эффектов, расположенных ниже.
- Лицензия: MIT
- Документация
- Скчать с GitHub
Демо:
2. Hover.css
Это огромная коллекция из 48 CSS3 эффектов при наведении, разработчиком которой является Ян Ланн. Что самое интересное в Hover.css, это то, что она имеет SASS, что действительно очень удобно для многих из разработчиков.
- Лицензия: MIT
- Документация (инсттрукция)
- Скчать с GitHub
Демо:
3. fancyInput
fancyInput занимается взаимодействием, связанным с вашими HTML <input> и <textarea> элементами. Это дает вам возможность осуществлять интересные эффекты CSS, когда пользователи вводят данные в ваши поля формы.
- Лицензия: Неизвестно
- Демо
- Документация
- Скачать с GitHub
4. magic
(Примечание: ссылка выше ведёт на веб-сайт на итальянском языке).
magic это интересная коллекция CSS3 эффектов. Этот проект вдохновлен работой Даниэля Идена Animate.css и создан итальянским разработчиком, который выходит под псевдонимом, Minimac.
С magic вы можете легко использовать CSS-анимации и переходы с помощью JQuery, просто установив обработчик событий в ваш целевой HTML объект, а затем добавляя / удаляя magic-классы CSS анимации.
Например, у нас есть кнопка под названием #submit-button, и мы хотим удалить его из DOM, и вы не хотите, чтобы пользователи продолжали нажимать на кнопку, которая предназначена для нажатия только один раз – но мы хотели бы сделать это в впечатляюще:
$('#submit-button').click(function(){
$(this).addClass('magictime vanishOut')
});
- Лицензия: Неизвестно
- Демо
- Документация
- Скачать с GitHub
5. Effeckt.css
Effeckt.css – всё еще в стадии разработки – это-первая мобильная библиотека CSS эффектов анимаций и переходов. Читайте 9 целей Effeckt.css и смотрите 22-секундный проекта видео на YouTube , чтобы получить представление о будущем Effeckt.css.
- Лицензия: MIT
- Демо
- Скачать с GitHub
Это не исчерпывающий перечень библиотек CSS эффектов. Если вы знаете какую нибудь библиотеку с открытым исходным кодом, пожалуйста, поделитесь им с другими в комментариях. Спасибо!
Продожение здесь