Magic is very easy to use and lightweight css3 animations with special effects. You can use various types of animations effects as you need for your project or brand.

It can be used on hover, click, delay an infinite loop with little help of jQuery or JavaScript.

Features:

• It can be installed with NPM and YARN.
• Supports on hover and click function.
• You can add the animation after a certain time.
• It can be worked as an infinite loop, where the animation will work automatically after a certain time.

Install with npm

$ npm install @minimac/magic.css

Install with YARN

$ yarn add magic.css

How to use it:

Include the CSS magic.css or magic.min.css in the header of the page.

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

<link rel="stylesheet" href="path/to/magic.min.css">

Hover effect with jQuery

$('.yourElement').hover(function () {
    $(this).addClass('magictime magic');
});

Load the animation after a certain time

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

Load the animation after a certain time with infinite loop

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

Change the time of the animation with CSS

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

Default CSS timing

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

Timing for a specific animation

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

Animation Classes:

<div class="container-magic">
  <div class="magic-base">
    <div class="magicInp"><i class="fa fa-plane" aria-hidden="true"></i></div>
  </div>
</div>

<div class="anime-magic-1 magic-anime">magic</div>

var timeoutHandler = null;
$(".anime-magic-1").click(function() {
  $(".magicInp").addClass('magictime magic');
  if (timeoutHandler) clearTimeout(timeoutHandler);
    timeoutHandler = setTimeout(function(){
    $(".magicInp").removeClass('magictime magic');
 }, 1000);
});

.container-magic{
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  margin-bottom: 25px;
}
.magicInp, .magic-base {
  position: absolute;
  margin-top: -50px;
  margin-left: -50px;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  text-align: center;
  -webkit-border-radius: 9px;
  border-radius: 9px;
  background-color: #393948;
}
.magicInp {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  line-height: 100px;
  font-size: 1.6rem;
  background-color: #fc297f;
  -webkit-box-shadow: 0 0 20px -6px #fc297f;
  box-shadow: 0 0 20px -6px #fc297f;
  color: #fff;
}
.magic-anime{
  border: 2px solid #000;
  padding: 10px 0;
  text-transform: uppercase;
  margin: 15px 0 0 0;
  cursor: pointer;
}