CSS3 Animations With Special Effects – Magic Effects

Looking for a affordable website?

GET STARTED
www.codingexpertz.com
CSS3 Animations With Special Effects – Magic Effects

File Size: 622KB

Total Views: 8056

Date Created:

Last Modified Date:

Official Website: Go to website

License: MIT

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:

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

Leave a comment

Your email address will not be published. Required fields are marked *

STAYUPDATED

Receive all our future posts instantly in your inbox. Enter your email to enroll.