CSS3 Animations with special effects. Many thanks to daneden for inspiration! Take a look: DEMO PAGE

##Installation

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

Example:

<linkrel="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 animationsetTimeout(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 foreversetInterval(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}

##Bower Installation

bower install magic 

##Browser Support