Tachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need.

One of the big original classic CSS animation libraries from Dan Eden.Īnimate.css (Part 3) by Hudson Taylor ( CodePen. The point is you just take what you need.Īnimista Example by Chris Coyier ( CodePen. You pick an animation you like and it gives you a class name you can use that calls a keyframe animation (you copy and paste both).

See Eric Bailey’s “Revisiting prefers-reduced-motion, the reduced motion media query” for information on how to accommodate users who prefer little or no motion. While animations can both be fun and create useful interactions, it’s worth remembering that not all users want them when browsing the web. But they are all essentially “CSS animation libraries.” (Some of them are kinda funny having “CSS3” in the title, which kinda dates them. Some libraries have different approaches: only take what you need classes, Sass mixins, light JavaScript libraries for adding/removing classes, etc. Let’s take a look at the landscape of them.

Still, poking around libraries like this helps foster ideas, gets you started with code examples, and might form a foundation for your own projects. I wholeheartedly think you should both 1) learn how to animate things in CSS by learning the syntax yourself and 2) customize animations to tailor the feel to your site. Want to apply a class like “animate-flip-up” and watch an element, uhhh, flip up? These are the kind of libraries to look at. These aren’t really libraries that help you with the syntax or the technology of animations, but rather are grab-and-use as-is libraries. There are an awful lot of libraries that want to help you animate things on the web.

Slam red button gif