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