CSS3 Animations with special effects
Switch branches/tags
Nothing to show
Clone or download
miniMAC Merge pull request #38 from dennisXZX/fix-spelling-mistake
fix minior spelling and format issues
Latest commit 7e446f9 Jul 6, 2018
Permalink
Failed to load latest commit information.
css new version 1.3.0 May 16, 2018
.gitignore new version 1.3.0 May 16, 2018
README.md fix minior spelling and format issues Jun 21, 2018
gulpfile.js update for 1.3.0 May 16, 2018
magic.css new version 1.3.0 May 16, 2018
magic.min.css new version 1.3.0 May 16, 2018
package.json 1.3.1 May 16, 2018

README.md

🎩 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