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