magic.css is a CSS3 framework of animations created by miniMAC. It is simple to use and most of the animations are cross-browser compatible. magic.css is currently in beta and more effects will be included in the near future.
All these magic effects can be handy to create sliders, banners, hover effects and carousels.
The effects are categorized as:
Magic, Perspective, Rotate, Bling, Static, Slide, Tin, Math & Bomb
How to Use
Include the magic.css in you file
And now we are going to add the effect to the targeted element by adding the class to the element. In this example I’ve chosen the swap effect.
$('#example').hover(function () {
$(this).addClass('magictime swap');
});
You can also change the time of the animation set by the class magictime for example:
.magictime {
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}
If you want to assign the timing to a specific animation, you can do it like this:
.magictime.swap {
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
}