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 :) |
 |
|---|
Top comments (8)
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 ...
You can check out my list.. its not limited to css, but javascript overall.
I put the best use case, pros and cons for each library :D.
dev.to/syakirurahman/top-15-animat...
Yes, this is what I mean ... much much better! Your article provides context, and "pros and cons", and code samples, you've really put in the effort ... way more useful!
Thanks, Leob. These were the best ones from my personal curations, and each of them has different aspects and animations, so I can't categorize them that way. It depends on the specific project and website requirements.
Yeah it depends on one's requirements, I can't argue with that ... well, at least each lib has a short description, so that helps a bit :)
Great list, just the title is a bit mislieading. While there are some CSS-only libs, some of the recommendations seem to be Javascript libraries. Maybe you should skip the "CSS" in the title?
Nice list, it helps me a lot!!!
Thank you! Glad you found it helpful! 😊 🙌