Animate.css

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

基本用法

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

  

  1. 给你想要添加动画效果的元素加上 animated 样式,如果想要动画循环执行的话,你需要加上 infinite 样式。
  2. 最后,你需要加上下面的一个样式:
  • 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
}

你可能感兴趣的:(Animate.css)