Magic CSS3? Create various magical interactive animation effects_html/css_WEB-ITnose

Magic CSS3 Animations is a unique CSS3 animation effects package that you can freely use in your Web projects. Simply introduce the CSS style on the page: magic.css or the compressed version magic.min.css and you are ready to use. This project is now on GitHub, including bling, perspective, rotate, slide, tin, bomb and many other special effects.

How to use:

First introduce the style file:

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

Then add the class magictime and the animation class name to the element you want to animate, for example:

$('.yourdiv').hover(function () {  $(this).addClass('magictime puffIn');});

If you want to execute the animation after a certain period of time, you can write like this :

setTimeout(function(){    $('.yourdiv').addClass('magictime puffIn');}, 5000);

It is also possible to execute the animation in a loop:

setInterval(function(){     $('.yourdiv').toggleClass('magictime puffIn');}, 3000 );

You can also customize the execution time of the animation and modify the time. Parameters:

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

If it is a modification for a specific animation effect, you can do this:

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

Download Now Online Demo