How to Add CSS Animation to a Website Easily with Animate.css

With every growing new day web is evolving, people are coming out with lots of new ideas and stuff to attract billions of internet savvy people. Web 2.0, HTML 5 etc, all these things concepts have enhanced the user experience drastically. Many frontend web developers tend to add lots of dynamic content to their design to keep use interested. They have tons of JavaScript libraries available at their disposal to add dynamic content or to add css animation to a website.

In this article we will see one such library Animate.css that is purely based on css and supports tons of animation and transition effects. This library is created and maintained by Daniel Eden.

First things First x Get a Copy

You need to download the animation.css from its official site. You can grab a copy from here or you can check it on Github. The css file is only 56kb and its minified version is 40kb. So you are getting bunch of cool, fun, and cross-browser animations for you to use in your projects with minimal foot print.

What are the animations supported

As mentioned above you have tons of css animation that can be used for your project. The animations are categorized as below so you can choose the right one

• Attention Seekers x bounce, flash, flash etc
• Bouncing Entrances x bounceIn, bounceInDown etc
• Bouncing Exits x bounceOut, bounceOutUp etc
• Fading Entrances x fadeIn, fadeInDownBig etc
• Fading Exits x fadeOutDownBig, fadeOutLeftBig etc
• Flippers x flip, flipOutX etc
• Rotating Entrances x rotateInDownLeft, rotateInUpLeft etc
• Rotating Exits x rotateOutDownLeft, rotateOutUpRight etc
• Sliders x slideInLeft, slideOutUp etc
• Specials x hinge, rollOut etc

 Usage

The library provides you one of the easiest way to add animation. You only need to include the animation.css and apply some animation class to any element you want to add animation to and you are done. When page loads you will get perfect animation.

Add css to your html as shown below

xlink href="animate.css" rel="stylesheet"/x

Then simply add the css class to element

xdiv id="animationSandbox" class="bounceInDown animated"x
  xh1xAnimate CSS Demox/h1x
  xp class="lead"xUse the buttons provided on right side to simulate the animation you want. Don't forget to explore all tabs.x/px
x/divx

Now go and refresh your page, you have your animation added to your page. We have setup a demo of complete animations available from this library, which you can see here

The demo uses JQuery code to apply different css on each button click. On each click the Js code will retrive data-anim attrib and apply that animation to our element. You can see here how we can apply css class

HTML

xdiv class="tab-pane" id="Specials"x	
xdiv class="buttons-playground"x
xbutton type="button" class="btn btn-default triggerAnimation" data-anim="hinge"xhingex/buttonx
xbutton type="button" class="btn btn-default triggerAnimation" data-anim="rollIn"xrollInx/buttonx
xbutton type="button" class="btn btn-default triggerAnimation" data-anim="rollOut"xrollOutx/buttonx
xbutton type="button" class="btn btn-default triggerAnimation" data-anim="lightSpeedIn"xlightSpeedInx/buttonx
xbutton type="button" class="btn btn-default triggerAnimation" data-anim="lightSpeedOut"xlightSpeedOutx/buttonx
x/divx
x/divx

JQuery

xscript src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"xx/scriptx	
xscriptx
  function testAnim(x) {	
    jQuery('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      jQuery(this).removeClass();
    });
  };
  jQuery(document).ready(function(){	
    jQuery('.triggerAnimation').click(function(){
	  var anim = jQuery(this).attr("data-anim");
      testAnim(anim);
    });
  });
x/scriptx

x