dittops / abanimation

Use CSS3 animation in just in few steps. Its simple as adding a class to the required element.

abAnimation

Use CSS3 animation in just in few steps. Its simple as adding a class to the required element.

Allows to add css animations easily to your web pages. You can simply use the animation with your events. Also you can use the auto animate when the element appears on the screen.

Steps

1. Add css and js files

   You will have to add abAnimation.css to your page

   <link href="/path/to/source/abAnimation.css" rel="stylesheet" type="text/css" />
   

   If you require auto animate when the element enters the window, you will have to add abAnimation.js to you web page. abAnimation requrire jquery to work. So make sure you have jquery added in you page.

   <script type="text/javascript" src="path/to/source"></script>
   

2. For auto animate add class to the elements

   If we need to give slide in effect to an element when in appears on the screen, add the class 'animation' and the class for the effect eg: 'slideInBottom', 'slideInTop', 'pulse', etc to your element.

Now refresh your page, and the element enter the page with animation,

Hope you like this :)