推荐一款CSS3动画插件ANIMATE.CSS

addstress https://github.com/daneden/animate.css

Animate.css

只需加类CSS动画

animate.css 是一个很酷，有趣，和跨浏览器动画，为您使用在您的项目。伟大的强调，主页，滑块，一般只需加水魅力。

Basic Usage

1. 包括在您的文档中的样式表 

2. 添加这个类名 animated 到你想要的DOM上.

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

Full example:

Example

Check out all the animations here!

Usage

在你的网站上使用animate.css，简单的将样式表插入您的文档的，并添加类的动画元素，随着任何动画的名字。这是它！你已经有了一个CSS动画元素。好极了

你可以做很多其他的东西animate.css当你结合jQuery或添加您自己的CSS规则。动态添加使用jQuery轻松动画：

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

当动画结束时，也可以检测到：

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