Animate.css

只需加类CSS动画

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

Basic Usage

包括在您的文档中的样式表 <head>

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

添加这个类名 animated 到你想要的DOM上.
最后，您需要添加下列类之一：

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

在你的网站上使用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.

CSS和javascript结合实现悬浮固定菜单效果

css3抖动动画,CSS Shake分享

子栏目

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