Easy CSS3 animations with Animate.css

In previous section we discussed how CSS animations work and what is required to make them work. In this chapter we will discuss CSS animation framework called animate.css which you can get here http://daneden.github.io/animate.css/ 

Using animate.css is rather very simple.

Root class that would be used with element you want to animated is called .animated

Then you would pick any of the animation preset CSS class and add it to the element you are animating. 

Lets start with our container element to which we will apply animations

Step 1

Download and add animate.css to your page

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css" type="text/css" />

Step 2

Pick an element to which you would like to apply animate.css animation, In our case lest just assume we picked the one below

<div>I will shake</div>

Step 3

Add animated class to above element

<div class="animated">I will shake</div>

This itself means nothing unless you add how would you like to see this element animated, so last step is to add preset animation class to above elements as shown in step 4

Step 4

We picked shake from the drop down and add this next to animated class

Now refresh your page and see the magic.

Here is an how it will look

As you see how easy it is to use animate.css. In next chapter we will dive into some javascript magic to control when to animate.