Creating Cross-browser CSS3 Animations with animate.css


animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Demos

Download

Creating Cross-browser CSS3 Animations with animateCss

Basic Usage:

Include animate.css in the head section of your web page.

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

Add a html DOM element on which you want to apply some CSS3 animations.

<div id="animateTest">  <p>Some Animations</p>  </div>

Add a link to trigger an animation.

<a data-test="flash">flash</a>

The javascript.

<script type="text/rocketscript">  $(document).ready(function(){  $('a[data-test]').click(function(){  var anim = $(this).attr('data-test');  testAnim(anim);  });  });  </script>

You Might Be Interested In: