README

:tophat: magic
---------------

CSS3 Animations with special effects. (→ 3.1 kB gzip)

 Demo

Checkout the demo for the animations here

 Table of Contents

- Installation
- Getting Started
- Usage with JavaScript
- Usage with jQuery
- HTML & CSS tips
- :tada: Gulp and SCSS (SASS) compiling
- :white_check_mark: Browser Support


 Installation

GitHub Package Registry - Package url
bash
npm install @minimac/magic.css


NPM - Package url
bash
npm i magic.css


YARN - Package url
bash
yarn add magic.css


 Getting Started

Include the file magic.css or include the minified version magic.min.css

html



or

html



 Usage with JavaScript

This is a sample code for on hover effect with JavaScript.
First, Include the class magictime and then a desired animation class.
js
const selector = document.querySelector('.yourdiv')
selector.classList.add('magictime', 'puffIn')


If you want to load the animation after certain time, you can use this example:
js
//set timer to 5 seconds, after that, load the magic animation
function myFunction() {
    const selector = 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:
js
//set timer to 3 seconds, after that, load the magic animation and repeat forever
function myFunction() {
    const selector = document.querySelector('.yourdiv')
    selector.classList.add('magictime', 'puffIn')
}
setInterval(myFunction, 3000);


 Usage with jQuery

This is a sample code for on hover effect with jQuery.
First, Include the class magictime and then the desired animation class.
js
$('.yourdiv').hover(function () {
    $(this).addClass('magictime puffIn');
});


If you want to load the animation after certain time, you can use this example:
js
//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:
js
//set timer to 3 seconds, after that, load the magic animation and repeat forever
setInterval(function(){
    $('.yourdiv').toggleClass('magictime puffIn');
}, 3000 );

 HTML & CSS tips

You can change the time of the animation by setting the class magictime for example:
css
.magictime {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}


Default CSS timing is:
css
.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):
css
.magictime.magic {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}


 Animation Classes

| MAGIC EFFECTS | BLING     | STATIC EFFECTS      | STATIC EFFECTS OUT | PERSPECTIVE            | ROTATE      |
|---------------|-----------|---------------------|--------------------|-----------------------