ProgrammingJavascriptCareerProductivityGadgetsASP.NETWeb Design

The best library to use for quick CSS animations

Written by
Published on
Modified on
Filed under
The best library to use for quick CSS animations

css animations

Animations on a website typically get saved for last or ignored completely mainly because they can be somewhat time consuming to implement. Even a simple 'bounce' animation can take a dozen or so lines of CSS, deepening on how much 'bounce' you actually want to have.

Which is why I highly recommend using the animate.css library built by Daniel Eden. It features over a dozen pre-built animations and comes in a super compact file size that really is a no-brainer to add to all of your projects. Even if you don't use it, it's just a nice to have feature-rich library that is at the ready for when you decide to use it.


A few of the more notable features include:

- Over a dozen pre-built animations
- Cross browser implementation
- 1-line npm install
- Maintained
- Small file size

The biggest feature though really are the smooth animations. The developer has done a fine job of setting up the proper transitions and timing. But, they are also relatively easy to reconfigure if you need to.


You have 3 options when it comes to installing the library.

NPN Install

npm install animate.css --save


yarn add animate.css


Or you can simply just add a link tag pointing to the official CDN URL


You can also simply download the file and link to it from your own server as well.

How to use

The best feature of the library is the ease-of-use. You can make any non "inline" element animated by adding the following class:


And then the class name of the animation that you want to implement. If you want to bounce an element into view for example, your HTMLwould look something like the following:

<div class='animate__animated animate__bouceInLeft'>i am the program</div>

That's all you really need in order to start to use the library. And there is a good chance that this is how you are primarily going to be using it.

But there are a few other features of Animate.css that you can use if you so wish.

Custom properties

The latest version of Animate.css makes use of custom properties, also known as CSS variables in order to set various animation settings.

These are also fully configurable as well. If for example, you wanted to increase the speed of all animations sitewide, the following would do just that.

/* This changes all the animations globaly */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;

While this makes the library way more flexible, also note that modifying these variables too much might lead to certain animations not rendering as initially intended.

Utility classes

And lastly, Animate.css offers various utility classes that you can use to modify animations on the fly. For example, if you wanted to modify the delay time of a particular element, you can do so by adding the animate__delay-2s class to the element.

<div class='animate__animated animate__bouceInLeft animate__delay-4s'>i am the program</div>

hello world

This is a good way to customize animations on specific elements without having to worry about breaking any others.

As mentioned, I use this library on most of my projects however if you are going to be using animations, do so sparingly and in the right context.

If 8 things on a page are bouncing around, it makes it hard for the users to determine which is the most important.

Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.


No messages posted yet

Developer Poll


Stay up to date

Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.

Add a comment

Keep me up to date on the latest programming news
Add Comment

Stay up to date

Get informed of the latest happenings in the programming world.

No thanks