Библиотеки CSS

В Интернете можно найти большое количество библиотек стилей, которые помогут вам с анимацией элементов на странице.

В этой статье нет библиотек, которые помогают с синтаксимом или технологиями анимации, а скорее библиотеки «бери и используй как есть».

Добавьте класс вашему элементу, что-нибудь вроде «animate-flip-up», скопируйте стили (и отредактируйте, если нужно), и проверьте результат.

Содержание:

Animista

Выберите нужную анимацию из пресетов, если нужно сделайте настройки в редакторе, скопируйте css класс и анимацию и вставьте на вашу страницу.

Перейти на Animista.

Animate.css

Одна из самых больших библиотек css анимации от Даниэла Эдена. Классическая css анимация.

Перейти на Animate.css.

Tachyons-animate

Большая библиотека css классов, которые вы можете добавить к нужным элементам. Можно использовать отдельно, можно вместе с другими библиотеками.

Перейти на Tachyons Animate. На GitHub.

Infinite

В этой библиотеке css анимации, которые работают бесконечно.

Перейти на Infinite.

Motion UI

Библиотека Sass для создания настраиваемых переходов и анимаций.

*Библиотека Sass для создания анимаций и переходов*

Перейти на Motion UI.

Micron

Небольшая библиотека css анимации, контролируемая javascript.

Перейти на Micron.

Vivify

Библиотека наподобие Animate.css с похожими анимациями.

Перейти на Vivify.

Hover.css

Коллекция hover эффектов, которые можно применить к ссылкам, кнопкам, лого, SVG, картинкам и так далее. Добавьте выбранный стиль, настройте под свои нужды или просто используйте для вдохновения. CSS, Sass и LESS.

Я использую эту библиотеку стилей для добавления hover эффектов в меню.