How to use Animate CSS and create stunning effects in seconds? - 3 projects
Tags: css, tutorial, beginners, webdev
Published: 2020-05-07 08:50:49

This article was originally published at https://www.blog.duomly.com/how-to-use-animate-css-tutorial-with-examples/

---

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.

{% youtube iB1im_rMGlw %}

Let’s get started!

###1. What is the animation.css library?###
<a href="https://daneden.github.io/animate.css/">![Duomly - Online Programming Courses - How to use animate.css](https://dev-to-uploads.s3.amazonaws.com/i/e58hzdnjh0kvpp4iflpz.png)</a>

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`
or
`$ 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:

```HTML
<head>
  <link rel="stylesheet" href="animate.min.css">
</head>
```
Or with CDN:
```HTML
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
```

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:

{% codepen https://codepen.io/duomly/pen/xxwppPM %}

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](https://dev-to-uploads.s3.amazonaws.com/i/ncgnnr0xk501jkhpzhlw.png)
Table - Delay Time

![Duomly - Online Programming Courses - How to use animate.css](https://dev-to-uploads.s3.amazonaws.com/i/ic2c0sn3culi7zl7seu1.png)
Table - Speed Time

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

```CSS
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.

{% codepen https://codepen.io/duomly/pen/KKdZQwB %}

###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. 

{% codepen https://codepen.io/duomly/pen/oNjpqrQ %}

###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:

{% codepen https://codepen.io/duomly/pen/RwWxJZg %}

###Conclusion###

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 <a href="https://www.blog.duomly.com/css-animations-cheatsheet/">articles</a>, 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

<a href="https://www.duomly.com">![Duomly Programming Courses Online](https://dev-to-uploads.s3.amazonaws.com/i/z5c2blb9cq8f5tn80gsz.jpg)</a>