animate.css是 Daniel Eden 写的一款浏览器、功能强大、简单易用的CSS3动画库插件。animate.css支持多达66种CSS3动画效果,并且十分易于使用,几行代码即可完成一个动画效果。
使用方法
要使用animate.css,首先要将animate.css文件在你的html文件头部中引入。然后在你想要执行动画的元素上添加class,class的内容是你需要的动画效果的名称,动画即可完成!就这么简单。
在头部引入animate.css文件:
<head> <link rel="stylesheet" href="animate.min.css"> </head>
你还可以使用animate.css和jQuery结合来做其它很多事情。使用jQuery来动态调用animate.css是一件非常简单的事情:
$('#yourElement').addClass('animated bounceOutLeft');
你可以通过下面的语句来检测动画什么时候结束:
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
注意:jQuery.one()函数的用处是只执行一次事件。关于它的用法请查看这里。
你可以自定义动画时间,还可以为动画添加一个延时。
#yourElement { -vendor-animation-duration: 3s; -vendor-animation-delay: 2s; -vendor-animation-iteration-count: infinite; }
自定义重构
animate.css是通过 Grunt 构建的。你可以非常容易的自定义重构它。首先,你需要Grunt和其它所有的依赖:
$ cd path/to/animate.css/ $ sudo npm install
接下来运行grunt watch来观察和编译你的自定义重构文件。如果你只需要一部分的动画效果,可以编辑animate-config.json文件来选择你需要的动画效果。
"attention_seekers": { "bounce": true, "flash": false, "pulse": false, "shake": true, "swing": true, "tada": true, "wobble": true }
更多关于animate.css的资料请参考:https://github.com/daneden/animate.css