##Update GitHub have a problem with the minified code on submit. You can download the correct RAW version for this code here: link to minified version

magic

CSS3 Animations with special effects. Now on beta, more effects coming soon. Many thanks to daneden for inspiration! My next step is to minifing the code. Take a look at the demo NEW DEMO PAGE

##Installation

Include the CSS style: magic.css or include the mynified version: magic.min.css

Example:

<link rel="stylesheet" href="yourpath/magic.css">

##Usage

This is a sample code on hover with jQuery, first you include the class "magictime" and after your desired animation.

$('.yourdiv').hover(function () {
  $(this).addClass('magictime puffIn');
});

If you want to load the animation after certain time, you can use this example:

//set timer to 5 seconds, after that, load the magic animation
setTimeout(function(){
  	$('.yourdiv').addClass('magictime puffIn');
}, 5000);

If you want to load the animation after certain time but with infinite loop, you can use this example:

//set timer to 3 seconds, after that, load the magic animation and repeat forever
setInterval(function(){ 
	$('.yourdiv').toggleClass('magictime puffIn');
}, 3000 );

You can change the time of the animation by set the class "magictime" for example:

.magictime {
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}

Default CSS timing is:

.magictime {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}

If you want to assign the timing to a specific animation, you can use that code (use 2 class):

.magictime.magic {
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
}