Здравствуйте, давайте рассмотрим лучшие бесплатные и платные библиотеки для создания CSS анимации.
Скачать исходники для статьи можно ниже
PS: Статья в процессе написания…
1. Hexa
Сайт: “github.com/amine1107/Hexa”
Hexa – это впечатляющая библиотека CSS анимации, простая и легкая. Используйте эти CSS-анимации, чтобы оживить тексты, фотографии, иконки и другие графические элементы на своём сайте!
2. Vivify
Сайт: “vivify.mkcreative.cz/”
Vivify – это ещё одна бесплатная библиотека CSS анимации, которую вы можете использовать для анимации кнопок, изображений и многого другого. Есть множество анимационных эффектов на выбор: мяч, пульсировать, встряхивание, исчезновение, прыжок и др.
3. Tachyons-animate
Сайт: “github.com/anater/tachyons-animate”
4. Infinite – useful CSS animations
Сайт: “github.com/tilomitra/infinite”
Набор CSS-анимаций, которые вы можете использовать для создания пульсирующих элементов, которые изменяют прозрачность и масштаб, а также для создания анимации всплывающий сообщнений, вращения элементов и многое другое.
5. Motion UI
Сайт: “github.com/zurb/motion-ui”
Motion UI – это мощная Библиотека Sass для создания CSS-переходов и анимации. Изначально он был интегрирован в Foundation for apps, но теперь может использоваться как автономная библиотека. Используйте его, чтобы добавить интересные эффекты, такие как скорость, слайд, масштаб и многое другое.
6. DynCSS
Сайт: “github.com/vzaccaria/DynCSS”
DynCSS – это отличная библиотека CSS анимации, которая анализирует правила CSS для -dyn – (attribute). Используйте её для создания простых и динамических CSS правил, которые оживяи ваши сайты.
7. All animation
Сайт: “all-animation.github.io/”
All animation – это набор инструментов, который содержит забавные анимации, чтобы сделать ваш сайт более интерактивным и привлекательным для пользователя.
All animation создаёт кросс-браузерные анимации.
All animation позволяет добавлять 3d эффекты на сайт.
8. Animate.CSS
Сайт: “daneden.github.io/animate.css/”
Простоя в использовании CSS кроссбраузерная библиотека для создания анимации на сайте. Используйте её, чтобы создать такие эффекты как подпрыгивание, вспышка, пульс, качели и многое другое!
9. Hover.CSS
Сайт: “ianlunn.github.io/Hover/”
Hover.CSS – это CCS3 коллекция с эффектами перекатывания. Используйте эти CCS анимации на ссылки, кнопки, логотипы, SVG, изображения и другие элементы, чтобы оживить их. Они доступны в CSS, Sass и LESS.
10. Effeckt.CSS
Сайт: “github.com/h5bp/Effeckt.css”
11. Magic CSS
Сайт: “github.com/miniMAC/magic”
12. CSSHAKE
Сайт: “github.com/elrumordelaluz/csshake/”
13. Repaintless CSS
Сайт: “szynszyliszys.github.io/repaintless/”
Repaintless CSS – это легкая библиотека CSS анимации с десятками классных анимаций, которые сделают ваш сайт интерактивным, не замедляя его.
14. Tuesday
Сайт: “github.com/shakrmedia/tuesday”
15. Obnoxious
Сайт: “github.com/tholman/obnoxious.css”
16. Flutter – CSS Image Hover Effects & Lightbox
Сайт: “codecanyon.net/item/flutter-css-image-hover-effects-lightbox/19326566?ref=webdesigndev”
17. Skloading – CSS3 Animations
Сайт: “codecanyon.net/item/skloading-css3-animations/17282844?ref=webdesigndev”
18. Viavi CSS3 Scroll Effects
Сайт: “codecanyon.net/item/viavi-css3-scroll-effects/14234524?ref=webdesigndev”
19. CSS Bubbles and Tooltips
Сайт: “codecanyon.net/item/css-bubbles-and-tooltips/13578680?ref=webdesigndev”
20. Animatia – CSS Image Hover Effects
Сайт: “codecanyon.net/item/animatia-css-image-hover-effects/11711217?ref=webdesigndev”
21. CSS Box and Text Shadows
Сайт: “codecanyon.net/item/css-box-and-text-shadows/11574696?ref=webdesigndev”
22. HoverMe
Сайт: “codecanyon.net/item/hoverme-a-css3-animation-packages/18956936?ref=webdesigndevЭ”
23. Wickedcss
Сайт: “kristofferandreasen.github.io/wickedCSS/”
24. Whoa
Сайт: “github.com/joerez/Woah.css”
25. Motion CSS
Сайт: “github.com/pavlyukpetr/motion-css”