Animate.css 强大的跨浏览器CSS3动画库-爱编程

来源：htmleaf 阅读：6 时间：2018-02-04 01:29

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