magic.css是一款带64种动画效果的CSS3动画库。magic.css中的动画分为12大类，全部使用CSS3 animation动画来完成。各种效果使用非常简单，只需要为元素添加和移除相应的class类即可。

安装

可以通过bower来安装magic.css动画库。

bower install magic                  
                

使用方法

使用该动画库需要在页面中引入magic.css文件。

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

HTML结构

你可以为一个元素设置背景图像，然后制作背景图像动画，也可以直接使元素产生动画。

<div id="element"></div>
                

制作动画

你可以动态的使用JavaScript为元素添加和移除相应的class类来产生各种元素动画效果。

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

如果你想在一段时间之后在产生动画，可以设置一个定时器。

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

或者：

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

你可以修改默认的动画持续时间：

/* 默认的动画持续时间 */
.magictime {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
}
/* 修改为3秒钟 */
.magictime {
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
}                
                

或者单独修改某个动画的持续时间：

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

浏览器兼容

以下版本的浏览器支持magic.css动画库。

• Chrome 31+
• Firefox 31+
• Safari 7+
• iOS Safari 7.1+
• Opera 27+
• Android 4.1+
• Android Chrome 42+
• IE 10+
• Opera Mini 不支持

magic.css动画库的github地址为：https://github.com/miniMAC/magic

在线预览    源码下载