Easily add animation with Animate.css

Swing? Bounce? Shake? You can add all that animations with Animate.css, very easily. View the demo will describe it the best.

So, how do we use it?





Link your HTML with this Animate.css.
Then make some HTML element. For Example h1.

<h1>Bounce</h1>

Next, we need to add an event to trigger that animation. So we will use pretty simple jQuery here.

$("h1").on("click",function(){
  $(this).addClass("animated bounce");
});


So, when we click the h1 element, it would has classes of animated and bounce. And, with those classes, the h1 element will bounce.
The class "animated" is necessary but class "bounce" could be changed with the name of animation you'd like to use, for example "swing".

See the demo here.

See the Pen Animate css by pras abdilah (@pras) on CodePen.

There are other animations, you could check them by yourself here http://daneden.github.io/animate.css/.