DEV Community

Cover image for How to use Animate CSS and create stunning effects in seconds? - 3 projects

Posted on • Originally published at

How to use Animate CSS and create stunning effects in seconds? - 3 projects

This article was originally published at

A few years ago, I was working on a mobile app project where the user interface was pretty advanced, loaded with lots of movement and gradients. It was just like each of those modern mobile apps, which would like to provide the best visual experience to users.

It took me lots of time to create all the animations in CSS and make them smooth and good looking according to designer instructions. Then, I started to look for some solution that will make this task more comfortable and will give me the required result without any surprises.

That’s exactly how I found Animate.css library, and from the beginning, I decided it’s what I need. I personally think that many front-end developers really love this library, as it allows us to make UI really stunning.

Today I’d like to give you an easy tutorial on how to use Animate.css library step by step to help you jump into this awesome resource.

P.S. If you are the one who prefers to watch instead of reading, join us on our youtube channel where we post all our tutorials as a video.

Let’s get started!

1. What is the animation.css library?

Duomly - Online Programming Courses - How to use animate.css

As a creator of the library wrote on the website, it’s „just-add-water CSS animations”. It’s very simple to use a library, which can be downloaded as a one CSS file and added to your project to use one of many predefined animations by adding a class to an element.

You can customize selected animations by setting the delay and speed of the effect. It’s possible to use animations with pure HTML and CSS projects, but you can also implement Javascript as well.

2. Installation

There are two ways to start using the Animate.css library. If you are using npm or yarn, it’s enough to install it using one of the following commands:

$ npm install animate.css --save
$ yarn add animate.css

But if you are not using any of them, just download a minified .css file or get a CDN and load it in the head section of your main file like in the code below:

  <link rel="stylesheet" href="animate.min.css">

Or with CDN:

  <link rel="stylesheet" href="">

Besides the very easy installation, Animate.css contains just one file, so it doesn’t affect the loading time really much, and the performance of the page is still safe.

3. How to add any animation to an element on your page?

Now, I’d like to explain to you step by step how you can add any of the available animations to an element on your page. 

Let’s imagine you have an h1 element on your page, and you want to add a bounce animation. In every element, it’s necessary to add animated class, and if you wish it to be infinite, then, of course, add infinite class.

After that, you have to specify the type of animation you selected as another class, in our case, bounce. Let’s take a look at the example:

And voila! It works really nicely. You can also set some more parameters, and you can style it manually or add other classes according to the tables below:

Duomly - Online Programming Courses - How to use animate.css
Table - Delay Time

Duomly - Online Programming Courses - How to use animate.css
Table - Speed Time

Or you can style it manually like other animations in CSS, check the example below:

h1 {
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: 5;

Now, when it’s more clear how to use it, let’s learn about different usage of animations given by the Animation.CSS library on three different examples.

4. Loading animations

Each layout needs a loader to attract users while waiting for data. Animate.css can help us with creating a pretty animation for any layout. Let’s try it!

I decided to use flip animation for three nested elements. Two most inner elements have a delay, so it means that the animations on those elements start 1 or 2 seconds later. Each element has a speed set to slower, which, according to the table, means 3s.

5. Navigation

Almost every page needs navigation, some of them have a typical horizontal one, but nowadays, it’s very common to use a toggle menu. It’s modern, responsive, user friendly, and for sure, it will help clients to remember your website.

Here’s an example of using Animate.css effects in the toggle menu with pure Javascript.

6. Form

The last project I’d like to show you in this article using Animate.css library is a form with simple validation.

I’d like to add a shaking effect for the input element while the field is required but not filled in.

Here’s the implementation:


As you could see in the few examples above, animations can bring lots of life and beauty to the UI.
It also makes the user experience much better because what can be better than a shaking field showing that this is the one that misses the value?

It’s possible to create many beautiful and advanced animations in CSS from scratch, you can check a short cheat sheet for animations in one of our previous articles, but it’s much easier and comfortable to use a dedicated library like Animate.css. Especially that it is so small that it won’t hurt the performance of the website.

Let us know in the comments if you tried to use Animate.css or any other library to create beautiful animations on your layouts. If yes, share your opinion. If not, maybe that’s the time to try?

Thank you for reading,
Anna from Duomly

Duomly Programming Courses Online

Top comments (12)

jkga profile image

Nice!.. By the way, v4.0 has been released and they are now an organization.

madza profile image

+1 was about to say, used animate.css a while ago and was surprised to see the changes now

duomly profile image

Thanks! :)

lyas777 profile image

Buena información :D

duomly profile image
Duomly • Edited

Gracias! Yo soy feliz :)

lyas777 profile image

Ya me suscribí a tu canal de YouTube 😄 and I will learn english too 😁

Thread Thread
duomly profile image
Duomly • Edited

Gracias por subscription! Video es la buena metoda. Yo necesito aprende mas bueno espanol :D :D

mahanandame profile image

Thanks for you write a beautiful article, it's very very helpful.

duomly profile image

Thank you! :)

alex95599499 profile image
Alex • Edited

One more point.

Clicking or hovering the mouse should trigger the animation. Use the class add operator. After animation, remove this class. How to find out the animation is over. I use the el.addEventListener("animationend", () => { //del class// }); function for this. I found information about this here:

cat profile image

I LOVE this library. I've used it for 90% of my projects so far!

duomly profile image
Duomly • Edited

Yeah! Its awesome!
Feel free to share some of your ideas for animations :)