网站已改版,老用户可使用旧版登录 Awesomes 点此进入>>

animate.css

前端 动画
跨浏览器的CSS3动画库,使用方便

Animate.css

Just-add-water CSS animation

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

基本用法

  1. 在页面的 <head>中引入样式文件:

    <head>
    <link rel="stylesheet" href="animate.min.css">
    </head>
  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

完整例子:

<h1 class="animated infinite bounce">Example</h1>

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

用法

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

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

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

$('#yourElement').addClass('animated bounceOutLeft');

你也可以检测一个动画是否结束了:

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

查看视频教程 学习怎样结合 jQuery 使用 jQuery。

注意: jQuery.one() 用在你希望只执行事件一次 的时候。更多信息 查看这里。你可以改变动画的持续时间,添加延迟或改变它执行的次数:

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

注意:确保用供应商的前缀(webkit, moz, 等等)来替换上面CSS中的 vendor

自定义构建

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

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

接下来,运行 gulp 来查看变化和编译你的自定义构建。比如,如果你只需要 “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 是在 MIT 下许可的。 (http://opensource.org/licenses/MIT)

贡献

Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues. I only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a pen. That last one is important.