Stunning CSS Framework For CSS3 Animations With jQuery

Magic is a CSS3 framework worked with jQuery that aims to provide a number of different types of CSS3 animations with special effects such like bling, slide, rotate, Perspective, math, etc.

Currently supported effects:

• Magic Effects: magic, twisterInDown, twisterInUp, swap
• Bling: puffIn, puffOut, vanishIn, vanishOut
• Static Effects: openDownLeft, openDownRight, openUpLeft, openUpRight, openDownLeftRetourn, openDownRightRetourn, openUpLeftRetourn, openUpRightRetourn
• Static Effects Out: openDownLeftOut, openDownRightOut, openUpLeftOuto, penUpRightOut
• Perspective: perspectiveDown, perspectiveUp, perspectiveLeft, perspectiveRight, perspectiveDownRetourn, perspectiveUpRetourn, perspectiveLeftRetourn, perspectiveRightRetourn
• Rotate: rotateDown, rotateUp, rotateLeft, rotateRight
• Slide: slideDown, slideUp, slideLeft, slideRight, slideDownRetourn, slideUpRetourn, slideLeftRetourn, slideRightRetourn
• Math: swashOut, swashIn, foolishOut, foolishIn, holeOut

How to use it:

1. Include Magic CSS framework on the web page

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

2. Include jQuery library on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

3. Include include the class "magictime" and after your desired animation in the javacript

$('.yourdiv').hover(function () {
  $(this).addClass('magictime puffIn');
});

4. You can also customize the animations in the magic.css

---

This awesome jQuery plugin is developed by miniMAC. For more Advanced Usages, please check the demo page or visit the official website.