CSS3 Animations with special effects.(→ 3.1 kB gzip)
Checkout the demo for the animationshere
- Installation
- Getting Started
- Usage with JavaScript
- Usage with jQuery
- HTML & CSS tips
- 🎉 Gulp and SCSS (SASS) compiling
- ✅ Browser Support
GitHub Package Registry-Package url
npm install @minimac/magic.css
NPM-Package url
npm i magic.css
YARN-Package url
yarn add magic.css
Include the filemagic.cssor include the minified versionmagic.min.css
<linkrel= "stylesheet"href= "yourpath/magic.css">
or
<linkrel= "stylesheet"href= "yourpath/magic.min.css">
This is a sample code for on hover effect withJavaScript.
First, Include the classmagictime
and then a desired animation class.
constselector=document.querySelector('.yourdiv')
selector.classList.add('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
functionmyFunction(){
constselector=document.querySelector('.yourdiv')
selector.classList.add('magictime','puffIn')
}
setTimeout(myFunction,5000);
If you want to load the animation after certain time but with an infinite loop, you can use this example:
//set timer to 3 seconds, after that, load the magic animation and repeat forever
functionmyFunction(){
constselector=document.querySelector('.yourdiv')
selector.classList.add('magictime','puffIn')
}
setInterval(myFunction,3000);
This is a sample code for on hover effect with jQuery.
First, Include the classmagictime
and then the desired animation class.
$('.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 canchange the timeof the animation by setting the classmagictime
for example:
.magictime{
-webkit-animation-duration:3s;
animation-duration:3s;
}
DefaultCSS timing is:
.magictime{
-webkit-animation-duration:1s;
animation-duration:1s;
}
If you want to assign thetiming to a specific animation,you can use the following code(use 2 class):
.magictime.magic{
-webkit-animation-duration:10s;
animation-duration:10s;
}
MAGIC EFFECTS | BLING | STATIC EFFECTS | STATIC EFFECTS OUT | PERSPECTIVE | ROTATE |
---|---|---|---|---|---|
magic | puffIn | openDownLeft | openDownLeftOut | perspectiveDown | rotateDown |
twisterInDown | puffOut | openDownRight | openDownRightOut | perspectiveUp | rotateUp |
twisterInUp | vanishIn | openUpLeft | openUpLeftOut | perspectiveLeft | rotateLeft |
swap | vanishOut | openUpRight | openUpRightOut | perspectiveRight | rotateRight |
openDownLeftReturn | perspectiveDownReturn | ||||
openDownRightReturn | perspectiveUpReturn | ||||
openUpLeftReturn | perspectiveLeftReturn | ||||
openUpRightReturn | perspectiveRightReturn |
SLIDE | MATH | TIN | BOMB | BOING | ON THE SPACE |
---|---|---|---|---|---|
slideDown | swashOut | tinRightOut | bombRightOut | boingInUp | spaceOutUp |
slideUp | swashIn | tinLeftOut | bombLeftOut | boingOutDown | spaceOutRight |
slideLeft | foolishIn | tinUpOut | spaceOutDown | ||
slideRight | holeOut | tinDownOut | spaceOutLeft | ||
slideDownReturn | tinRightIn | spaceInUp | |||
slideUpReturn | tinLeftIn | spaceInRight | |||
slideLeftReturn | tinUpIn | spaceInDown | |||
slideRightReturn | tinDownIn | spaceInLeft |
If you want to customize the CSS files, now you will have the chance. For example, if you want to include only certain animations, you will have to go to this file:
assets/scss/magic.scss
Comment or uncomment your desired file and run from terminal the following commands:
npm install
and last command:
gulp
Automaticallythis generate the new files!
Browser | Chrome | Firefox | Safari | iOS Safari | Opera | Android | Android Chrome | IE | Opera Mini |
---|---|---|---|---|---|---|---|---|---|
Version | 31+ | 31+ | 7+ | 7.1+ | 27+ | 4.1+ | 42+ | 10+ | ❌ |