推荐一款CSS3动画插件ANIMATE.CSS
addstress https://github.com/daneden/animate.css
Animate.css
只需加类CSS动画
animate.css 是一个很酷，有趣，和跨浏览器动画，为您使用在您的项目。伟大的强调，主页，滑块，一般只需加水魅力。
Basic Usage
包括在您的文档中的样式表
<head><head> <link rel="stylesheet" href="animate.min.css"> </head>
添加这个类名
animated到你想要的DOM上.最后，您需要添加下列类之一：
bounceflashpulserubberBandshakeswingtadawobblejellobounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRighthingerollInrollOutzoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUpslideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUp
Full example:
<h1 class="animated infinite bounce">Example</h1>
Check out all the animations here!
Usage
在你的网站上使用animate.css，简单的将样式表插入您的文档的<head>，并添加类的动画元素，随着任何动画的名字。这是它！你已经有了一个CSS动画元素。好极了
<head> <link rel="stylesheet" href="animate.min.css"> </head>
你可以做很多其他的东西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.
