CSS3 Animations with Special Effects

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.

css-special-effect-animations

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

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

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;
}

Demo (Swap Effect)