Stunning CSS Framework For CSS3 Animations With jQuery

File Size: 8.61 KB
Views Total: 2503
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.