CSS3 Animate It

Because static content is boring!

Quick Start

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>	

Extra Functions

Sequencing

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>	

Offset

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>	

Animate Once

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>	

Animation Speed

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>	

On Click Toggle (New!)

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>


On Click With Sequencing (New!)

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>