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



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)

Github: https://github.com/miniMAC/magic
Demos: http://www.minimamente.com/magic-css3-animations/

Leave a Reply

Your email address will not be published. Required fields are marked *