magic-带64种动画效果的CSS3动画库

当前位置:主页 > CSS3库 > CSS3动画 > magic-带64种动画效果的CSS3动画库
magic-带64种动画效果的CSS3动画库
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-05-12
    阅读:
简要教程

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

网友评论