animate.css 是一個(gè)集合酷的哪痰，有趣的和跨瀏覽器的動(dòng)畫诈唬。 Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
基本用法
- 在頁面的<head>中引入樣式文件
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
- 給你想要添加動(dòng)畫效果的元素加上 animated 樣式，如果想要?jiǎng)赢嬔h(huán)執(zhí)行的話宁否，你需要加上 infinite 樣式窒升。
- 最后，你需要加上下面的一個(gè)樣式:
- 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>
用法
要在你的站點(diǎn)中使用 animate.css异剥，只需將樣式文件放入你的頁面的 <head> 中，然后將 animated 樣式添加到一個(gè)元素上絮重，并且加上任意一個(gè)動(dòng)畫的名字冤寿，就這樣，你就得到了一個(gè) CSS 動(dòng)畫的元素青伤！
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
當(dāng)你將 animate.css 與 jQuery 一起使用或者添加你自己的 CSS 規(guī)則時(shí)督怜， 你可以用 animate.css 做一大堆其他的事，使用 jQuery 動(dòng)態(tài)添加動(dòng)畫：
$('#yourElement').addClass('animated bounceOutLeft');
你也可以檢測(cè)一個(gè)動(dòng)畫是否結(jié)束了：
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
注意： jQuery.one() 用在你希望只執(zhí)行事件一次 的時(shí)候狠角。更多信息 查看這里号杠。你可以改變動(dòng)畫的持續(xù)時(shí)間，添加延遲或改變它執(zhí)行的次數(shù)：
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
*注意：確保用供應(yīng)商的前綴（webkit, moz, 等等）來替換上面CSS中的 vendor *
自定義構(gòu)建
Animate.css 由 Grunt 提供支持，你可以很輕松地執(zhí)行自定義構(gòu)建姨蟋。首先屉凯，你需要 Grunt 和其它的依賴項(xiàng)：
$ cd path/to/animate.css/
$ sudo npm install
接下來，運(yùn)行 ==grunt watch== 來查看變化和編譯你的自定義構(gòu)建眼溶。比如悠砚，如果你只需要 “attention seekers” 中的一些，只需編輯 animate-config.json 文件來只選擇你需要的動(dòng)畫堂飞。
"attention_seekers": {
"bounce": true,
"flash": false,
"pulse": false,
"shake": true,
"swing": true,
"tada": true,
"wobble": true,
"jello":true
}
