Skip to content

akiarostami/magic

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 

Repository files navigation

##Update GitHub have a problem with the minified code on submit. You can download the correct RAW version for this code here: link to minified version

magic

CSS3 Animations with special effects. Now on beta, more effects coming soon. Many thanks to daneden for inspiration! My next step is to minifing the code. Take a look at the demo NEW DEMO PAGE

##Installation

Include the CSS style: magic.css or include the mynified version: magic.min.css

Example:

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

##Usage

This is a sample code on hover with jQuery, first you include the class "magictime" and after your desired animation.

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

If you want to load the animation after certain time, you can use this example:

//set timer to 5 seconds, after that, load the magic animation
setTimeout(function(){
  	$('.yourdiv').addClass('magictime puffIn');
}, 5000);

If you want to load the animation after certain time but with infinite loop, you can use this example:

//set timer to 3 seconds, after that, load the magic animation and repeat forever
setInterval(function(){ 
	$('.yourdiv').toggleClass('magictime puffIn');
}, 3000 );

You can change the time of the animation by set the class "magictime" for example:

.magictime {
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}

Default CSS timing is:

.magictime {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}

If you want to assign the timing to a specific animation, you can use that code (use 2 class):

.magictime.magic {
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
}

About

CSS3 Animations with special effects

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published