DEV Community

loading...
Cover image for Best CSS Libraries you should use in 2021

Best CSS Libraries you should use in 2021

Pritesh Bhoi
Frontend developer (web and mobile) | WordPress | Shopify | Squarespace. I'm available 30+hrs in a week. Let's Discuss Project
・2 min read

There are a number of libraries out there that wish to assist you with animating things on the web. These aren't actually libraries that aid you with animation syntax or technology; rather, they're grab-and-go libraries. Do you want to add a class like "animate-flip-up" to an element and watch it, uh, flip up? These are the types of libraries you keep an eye out for.

Let's take a peek at their environment. Some libraries take different approaches, such as taking only the classes you need, using Sass mixins, using light JavaScript libraries to add/remove classes, and so on. But they're all essentially "CSS animation libraries." (It's kind of amusing that some of them have "CSS3" in the title, which makes them seem a little out of date.)

Motion UI

A Sass library for creating flexible CSS transitions and animations.

Animate.css

One of the big original classic CSS animation libraries from Dan Eden.

tachyons-animate

Tachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need. tachyons-animate extends those by adding “Single purpose classes to help you orchestrate CSS animations.”

Vivify

Vivify is sort of like Animate.css in the sense that it contains a lot of the same types of animations

Animista

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). The point is you just take what you need.

Infinite

These animations, like rotations and pulses, that are specifically designed to run and repeat forevers.

comment below your favourite CSS Library.

Discussion (0)