Stunning CSS Framework For CSS3 Animations With jQuery

File Size: 8.61 KB
Views Total: 2508
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=""></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.