animate动画html5,Animate.css 强大的跨浏览器CSS3动画库

动画html5,Animate.css 强大的跨浏览器CSS3动画库"/>

animate动画html5,Animate.css 强大的跨浏览器CSS3动画库

animate.css是 Daniel Eden 写的一款浏览器、功能强大、简单易用的CSS3动画库插件。animate.css支持多达66种CSS3动画效果，并且十分易于使用，几行代码即可完成一个动画效果。

使用方法

要使用animate.css，首先要将animate.css文件在你的html文件头部中引入。然后在你想要执行动画的元素上添加class，class的内容是你需要的动画效果的名称，动画即可完成！就这么简单。

在头部引入animate.css文件：

你还可以使用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

}