Animate.css

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

Animate.css

Just-add-water CSS animation

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Basic Usage

  1. Include the stylesheet on your document's <head>

    <head>
      <link rel="stylesheet" href="animate.min.css">
    </head>
    
  2. Add the class animated to the element you want to animate. You may also want to include the class infinite for an infinite loop.

  3. Finally you need to add one of the following classes:

    • 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

Full example:

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

Check out all the animations here!

Usage

To use animate.css in your website, simply drop the stylesheet into your document's <head>, and add the class animated to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super!

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

You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:

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

You can also detect when an animation ends:

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

View a video tutorial on how to use Animate.css with jQuery here.

Note: jQuery.one() is used when you want to execute the event handler at most once. More information here.

You can change the duration of your animations, add a delay or change the number of times that it plays:

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

Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)

Custom Builds

Animate.css is powered by Grunt, and you can create custom builds pretty easily. First of all, you’ll need Grunt and all other dependencies:

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

Next, run grunt watch to watch for changes and compile your custom builds. For example, if you want only some of the the “attention seekers”, simply edit the animate-config.json file to select only the animations you want to use.

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

License

Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)

Contributing

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.

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.

讨论区