Animate.css
1.簡介：一個跨瀏覽器的 css3 動畫庫，內置了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）、放大縮小（等多達 60 多種動畫效果，幾乎包含了所有常見的動畫效果。在炫酷的同時，還一直保持着易於使用的特點。
2. 官網：效果預覽
3.0 Installation（安裝）：
通過bower安裝：
$ bower install animate.css --save
通過npm安裝：$ npm install animate.css --save
3.1 基本用法：
在文檔的標題中包含樣式表，通過link標簽引入（下載方式可以通過下面cdn訪問復制源碼）
<head> <link rel="stylesheet" href="animate.min.css"> </head>
3.2 cdn鏈接：
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css3.3 您可以生成該特定版本的SRI哈希，然后使用它來確保文件的完整性;您還可以通過設置相應的交叉路口屬性向CDN發出匿名請求：
<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css" integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw" crossorigin="anonymous"> <!-- or --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw" crossorigin="anonymous"> </head>
3.4 將class動畫添加到您想要動畫的元素中。您可能還想要包括一個很多class用來以后使用
3.4.2 最后，您需要添加以下類：
| Class Name | |||
|---|---|---|---|
bounce |
flash |
pulse |
rubberBand |
shake |
headShake |
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 |
jackInTheBox |
rollIn |
rollOut |
zoomIn |
zoomInDown |
zoomInLeft |
zoomInRight |
zoomInUp |
zoomOut |
zoomOutDown |
zoomOutLeft |
zoomOutRight |
zoomOutUp |
slideInDown |
slideInLeft |
slideInRight |
slideInUp |
slideOutDown |
slideOutLeft |
slideOutRight |
|
example:
<h1 class="animated infinite bounce">Example</h1>
4. 你可以用動畫來做很多其他的事情。當您將它與jQuery結合或添加您自己的CSS規則時。使用jQuery動態地添加動畫：
$('#yourElement').addClass('animated bounceOutLeft');
你還可以檢測到動畫的結束：
// See https://github.com/daneden/animate.css/issues/644
var animationEnd = (function(el) {
var animations = {
animation: 'animationend',
OAnimation: 'oAnimationEnd',
MozAnimation: 'mozAnimationEnd',
WebkitAnimation: 'webkitAnimationEnd',
};
for (var t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
})(document.createElement('div'));
$('#yourElement').one(animationEnd, doSomething);
animate.css和jQuery結合教程：點擊打開鏈接（需要翻牆）
5. 您還可以擴展jQuery來添加一個功能，它可以為您完成所有工作：
$.fn.extend({
animateCss: function(animationName, callback) {
var animationEnd = (function(el) {
var animations = {
animation: 'animationend',
OAnimation: 'oAnimationEnd',
MozAnimation: 'mozAnimationEnd',
WebkitAnimation: 'webkitAnimationEnd',
};
for (var t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
})(document.createElement('div'));
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
if (typeof callback === 'function') callback();
});
return this;
},
});
像這樣使用它：
$('#yourElement').animateCss('bounce');
or;
$('#yourElement').animateCss('bounce', function() {
// Do somthing after animation
});
你可以改變你的動畫的持續時間，添加一個延遲或者改變它播放的次數：
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
注意：其中vendor代表(webkit, moz)其中的一個