Animate.css

animate.css 是一个集合酷的，有趣的和跨浏览器的动画。 Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

基本用法

1. 在页面的中引入样式文件

2. 给你想要添加动画效果的元素加上 animated 样式，如果想要动画循环执行的话，你需要加上 infinite 样式。
3. 最后，你需要加上下面的一个样式:

• bounce
• flash
• pulse
• rubberBand
• shake
• swing
• tada
• wobble
• jello
• bounceIn
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp
• bounceOut
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp
• fadeIn
• fadeInDown
• fadeInDownBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• fadeOut
• fadeOutDown
• fadeOutDownBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig
• fadeOutUp
• fadeOutUpBig
• flipInX
• flipInY
• flipOutX
• flipOutY
• lightSpeedIn
• lightSpeedOut
• rotateIn
• rotateInDownLeft
• rotateInDownRight
• rotateInUpLeft
• rotateInUpRight
• rotateOut
• rotateOutDownLeft
• rotateOutDownRight
• rotateOutUpLeft
• rotateOutUpRight
• hinge
• rollIn
• rollOut
• zoomIn
• zoomInDown
• zoomInLeft
• zoomInRight
• zoomInUp
• zoomOut
• zoomOutDown
• zoomOutLeft
• zoomOutRight
• zoomOutUp
• slideInDown
• slideInLeft
• slideInRight
• slideInUp
• slideOutDown
• slideOutLeft
• slideOutRight
• slideOutUp

完整例子：

Example

这里查看所有的动画效果！

用法

要在你的站点中使用 animate.css，只需将样式文件放入你的页面的 中，然后将 animated 样式添加到一个元素上，并且加上任意一个动画的名字，就这样，你就得到了一个 CSS 动画的元素！

当你将 animate.css 与 jQuery 一起使用或者添加你自己的 CSS 规则时， 你可以用 animate.css 做一大堆其他的事，使用 jQuery 动态添加动画：

$('#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;
}

*注意：确保用供应商的前缀（webkit, moz, 等等）来替换上面CSS中的 vendor *

自定义构建

Animate.css 由 Grunt 提供支持，你可以很轻松地执行自定义构建。首先，你需要 Grunt 和其它的依赖项：

$ cd path/to/animate.css/
$ sudo npm install

接下来，运行 ==grunt watch== 来查看变化和编译你的自定义构建。比如，如果你只需要 “attention seekers” 中的一些，只需编辑 animate-config.json 文件来只选择你需要的动画。

"attention_seekers": {
  "bounce": true,
  "flash": false,
  "pulse": false,
  "shake": true,
  "swing": true,
  "tada": true,
  "wobble": true,
  "jello":true
}