Include css3-animated.js at the end of your file and animations.css in the head.
Once you have done that you can just define "animatedParent" as the parent class which is what will trigger the child class "animated" to animate whichever animation is defined, here we are using "bounceInDown".
Click here to see an example of all the animations.
<div class='animatedParent'> <h2 class='animated bounceInDown'>It Works!</h2> </div>
If you want to have a set of animations start one after the other then you can set a sequence time in ms using "data-sequence" then define the order with "data-id".
<div class='animatedParent' data-sequence='500'> <h2 class='animated bounceInDown' data-id='1'>It Works!</h2> <h2 class='animated bounceInDown' data-id='2'>This animation will start 500ms after</h2> <h2 class='animated bounceInDown' data-id='3'>This animation will start 500ms after</h2> </div>
This will make the make the animation either start before or after it has entered the viewport by the specified ammount. So if you wanted to only start the animation after the user has scrolled 300px past it then setting an offset of -300px would achieve this.
<div class='animatedParent'data-appear-top-offset='-300'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>
Adding this will make sure the item only animates once and will not reset when it leaves the viewport.
<div class='animatedParent animateOnce'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>
Currently you can define 4 speeds, the default which requires nothing then slow, slower and slowest.
<div class='animatedParent'>
<h2 class='animated bounceInDown slowest'>It Works!</h2>
</div>
You can now add individual delays to your animations if you don't want to do it with sequencing delays, please refer to the animations css file to see all the delays available.
<div class='animatedParent'>
<h2 class='animated bounceInDown delay-250'>It Works!</h2>
</div>
You can now call the animations with an on click event. You can can define an out animation for transitioning out with this.
Please note that the target will only animate on view if you wrap it in an animatedParent class. If it is not in this then the animation will only trigger on click.
<input type='button' class='animatedClick' data-target='clickExample'> <h2 class='animated bounceInDown clickExample fadeOutDown'>It Works!</h2>
You can now call the animations with an on click event. You can can define an out animation for transitioning out with this.
<input type='button' class='animatedClick' data-target='clickExample' data-sequence='500'> <h2 class='animated bounceInDown clickExample fadeOutDown' data-id='1'>It Works!</h2> <h2 class='animated bounceInDown clickExample fadeOutDown' data-id='2'>It Works!</h2>
This is just a fix that will fix the elements not appearing on IE9 or less, please not that the animations will not work on IE9 or less.
Place this below the animations.css link in the head of your file.
<!--[if lte IE 9]>
<link href='/PATH/TO/FOLDER/css/animations-ie-fix.css' rel='stylesheet'>
<![endif]-->