DEV Community

Cover image for 20 Super Useful CSS Animation Libraries
Hossein Yazdi
Hossein Yazdi

Posted on • Updated on

20 Super Useful CSS Animation Libraries

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.

Image description

2. Magic CSS animations

A set of simple animations to include in your web or app projects.

Image description

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.

Image description

4. Hamburgers by Jonathan Suh

A collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library.

Image description

5. Whirl

A collection of CSS loading animations, examples include; arc, basic, bounce, chase, color-range, color-wheel, different-directions, dots, and more.

Image description

6. Three Dots

A set of CSS loading animations made with just single element.

Image description

7. Mimic.css

A collection of open-source CSS text animations.

Image description

8. Hover.css

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.

Image description

9. CSS Animation Kit

A pure CSS and HTML-based animation kit.

Image description

10. LDRS

A free, open-source loaders and spinners library.

Image description

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.

Image description

12. Granim.js

Create fluid and interactive gradient animations with this small JavaScript library.

Image description

13. tsParticles

Easily create highly customizable particles, confetti, and fireworks animations and use them as animated backgrounds for your website.

Image description

14. Vanta.js

Animated website backgrounds in a few lines of code.

Image description

15. imagehover.css

A lovingly crafted CSS library that allows you to easily implement scaleable image hover effects.

Image description

16. Moving Letters

A collection of text animation with JavaScript & anime.js

Image description

17. Epic Spinners

A collection of easy to use CSS spinners collection with Vue.js integration

Image description

18. SpinKit

Simple loading spinners animated with CSS.

Image description

19. particles.js

A lightweight JavaScript library for creating particles

Image description

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 :)
Twitter URL

Top comments (8)

Collapse
 
leob profile image
leob • Edited

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 ...

Collapse
 
syakirurahman profile image
Syakir

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...

Collapse
 
leob profile image
leob • Edited

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!

Collapse
 
hosseinyazdi profile image
Hossein Yazdi

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.

Collapse
 
leob profile image
leob

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 :)

Collapse
 
efpage profile image
Eckehard

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?

Collapse
 
ericcccc profile image
大帅的酷炫吊炸天id 曹

Nice list, it helps me a lot!!!

Collapse
 
hosseinyazdi profile image
Hossein Yazdi

Thank you! Glad you found it helpful! 😊 🙌