A hand-picked collection of the best 20 CSS animations curated from various sources around the web.
Most of them will generate pure CSS code without requiring any external libraries.
If you want to explore more frontend tools and resources, visit our page 180+ Best Frontend Development Tools to find out more.
1. Animate.css
A library of ready-to-use, cross-browser animations for you to use in your projects.
2. Magic CSS animations
A set of simple animations to include in your web or app projects.
3. Animista
A CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.
4. Hamburgers by Jonathan Suh
A collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library.
5. Whirl
A collection of CSS loading animations, examples include; arc, basic, bounce, chase, color-range, color-wheel, different-directions, dots, and more.
6. Three Dots
A set of CSS loading animations made with just single element.
7. Mimic.css
A collection of open-source CSS text animations.
8. Hover.css
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.
9. CSS Animation Kit
A pure CSS and HTML-based animation kit.
10. LDRS
A free, open-source loaders and spinners library.
11. AnimatiSS
AnimatiSS is a tool to preview custom CSS animations and grab their code with a simple click, to paste it into your own web projects.
12. Granim.js
Create fluid and interactive gradient animations with this small JavaScript library.
13. tsParticles
Easily create highly customizable particles, confetti, and fireworks animations and use them as animated backgrounds for your website.
14. Vanta.js
Animated website backgrounds in a few lines of code.
15. imagehover.css
A lovingly crafted CSS library that allows you to easily implement scaleable image hover effects.
16. Moving Letters
A collection of text animation with JavaScript & anime.js
17. Epic Spinners
A collection of easy to use CSS spinners collection with Vue.js integration
18. SpinKit
Simple loading spinners animated with CSS.
19. particles.js
A lightweight JavaScript library for creating particles
20. CSShake
Easy-to-use classes that will add different kinds of shake to each part of your site."
| If you like this kind of stuff, follow for more :) |
 |
|---|
So which one should I choose? Honestly, rather than listing 20 libraries, give me just 3 libraries (for instance the most "mainstream" or popular ones), and discuss the merits and the pros and cons of each ...