The best library to use for quick CSS animations

Written by

Walter G.

Published on

August 27 2020

Modified on

October 30 2020

Filed under

css

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.

Features

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.

Install

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

NPN Install

npm install animate.css --save

Yarn

yarn add animate.css

CDN

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

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>

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:

animate__animated

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.

Comments

No messages posted yet

Add comment