Skip to content

saviour2008/magic

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

93 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🎩 magic

CSS3 Animations with special effects. Take a look: DEMO PAGE

If you want to use magic animations in react, see react-magic repository.

Installation

Include the CSS style: magic.css or include the minified 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 setting the class "magictime" for example:

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

Default CSS timing is:

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

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

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

NPM installation

Install via NPM: npm install magic.css link to npm package

Browser Support

Browsers Version
Chrome 31+
Firefox 31+
Safari 7+
iOS Safari 7.1+
Opera 27+
Android 4.1+
Android Chrome 42+
IE 10+
Opera Mini

About

CSS3 Animations with special effects

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 99.2%
  • JavaScript 0.8%