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:
<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; }
##Bower Installation
bower install magic
##Browser Support
| Browsers | Version |
|---|---|
| Chrome | 31+ |
| Firefox | 31+ |
| Safari | 7+ |
| iOS Safari | 7.1+ |
| Opera | 27+ |
| Android | 4.1+ |
| Android Chrome | 42+ |
| IE | 10+ |
| Opera Mini | β |