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>