Animate.css動畫庫，簡單的使用，以及源碼剖析

項目演練地址
推薦的在線文檔社區-MDN
css在線手冊包含css3

animate.css是什么？能做些什么？

animate.css是一個css動畫庫，使用它可以很方便的快捷的實現，我們想要的動畫效果，而省去了操作js的麻煩。同時呢，它也是一個開源的庫，在GitHub的點贊高達5萬以上。功能非常強大。性能也足夠出色。

如何使用它？

1. 首先你需要到github上下載它，地址
2. 拿到它之后，把animate.css引入到你的html文件。
3. 參考官方的文檔（當然了，是英文的哈哈哈，程序員不會英語可萬萬不行的哦。）就可以十分方便的使用它了。
4. 注意哈，內聯元素比如a標簽有些動畫是不支持的。目前該庫正在一點一點的更新中。
5. 例子

（一）靜態的使用它
<!-- animated是必須添加的；bounce是動畫效果；infinite從語義來看也秒懂，無限循環，不添加infinite默認播放一次 -->
使用的基本公式就是：

 <div class="animated 想要的動畫名稱 循環的次數 延遲的時間 持續的時間">動畫</div>


 <div class="animated bounce infinite delay-2s duration-2s ">動畫</div>

（二）動態的使用它
//  主要的思路就是：給動畫對象添加類，然后監聽動畫結束事件，一旦監聽到動畫結束，立即移除前面添加的類。----如果你現在還不會使用js基本語法以及jQuery，那么確實比較難理解
// 以下是官方給出的jQuery封裝
//擴展$對象，添加方法
       animateCss $.fn.extend({
       animateCss: function (animationName) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
           $(this).addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass('animated ' + animationName);
           });
   }

// 以下是一個小demo
   //animate("選擇器","動畫","次數","時延")
   function animate(seletor, animation_name, count, delay) { 
       
       var target = document.querySelectorAll(seletor) 
       var timer = null;

       timer = setInterval( function() { target.forEach( function(x) { x.className += " animated " + animation_name;
       x.addEventListener("animationend", function(){ 
       x.className = x.className.replace(" animated " + animation_name, "");});
       } )
       count --; 
       if( count <= 0 ) {
                   clearInterval( timer );
               }
           }, delay)
       } //使用示例 animate('.haha', "bounce", 2, 1000);
   // 通過這個例子你就能明白如何動態的使用它了，這個小demo只實現了對animationend的監聽。

• 如果你想更簡單的使用js，請看以下代碼.注意以下操作均用到了jQuery

//  1.如果說想給某個元素動態添加動畫樣式，可以通過jquery來實現：
 $('#yourElement').addClass('animated bounceOutLeft');
//  2.當動畫效果執行完成后還可以通過以下代碼添加事件
 $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
//  3.你也可以通過 JavaScript 或 jQuery 給元素添加這些 class，比如：
 $(function(){
    $('#yourElement').addClass('animated bounce');
 });
//  4.有些動畫效果最后會讓元素不可見，比如淡出、向左滑動等等，可能你又需要將 class 刪除，比如：
 $(function(){
    $('#yourElement').addClass('animated bounce');
    setTimeout(function(){
        $('#yourElement').removeClass('bounce');
    }, 1000);
});

• 以上的js代碼不會？沒關系我們還有別的辦法，實現同樣的效果

/* 我們可以通過自己重寫源代碼里面的屬性，從而覆蓋源代碼，讓動畫實現我們想要的效果，如果這個你還不會？ok那你還是好好把前面的html啊，css啊移動端的布局啊，好好的溫習溫習*/

#yourElement { 
        -vendor-animation-duration: 3s; //設置-vendor-animation-delay: 2s; //設置延遲的時間-vendor-animation-iteration-count: infinite; //
        }

/* 關於時間的說明，animated中定義了幾個類。在官方的文檔中也給出了，默認的是delay-1s,duration也是1s
slow	2s
slower	3s
fast	800ms
faster	500ms */

• 還需要說明的就是在你的項目中使用它，需要注意的地方，如果你還未掌握服務器端的技術，這點你可以忽略

animate提供了npm以及yarn的下載安裝方式，你可以使用npm 或者yarn來下載並且使用它。如何你可以通過設置配置文件(animate-config.json)來選取你需要的功能模塊。譬如，我不需要flash和shake效果，只要在配置文件中，設置為false既可。
"attention_seekers": {
  "bounce": true,
  "flash": false,
  "pulse": false,
  "shake": true,
  "headShake": true,
  "swing": true,
  "tada": true,
  "wobble": true,
  "jello":true
}

解析源碼

這里最主要的是就是三個關鍵類，

1. animated類

• 以下是animated類的部分源碼

+++
.animated.flip {
  -webkit-backface-visibility: visible;
  /* 指定元素背面面向用戶時是否可見。 */
  backface-visibility: visible;
  -webkit-animation-name: flip;
  /* 檢索或設置對象所應用的動畫名稱，必須與規則@keyframes配合使用，因為動畫名稱由@keyframes定義 */
  animation-name: flip;
}
+++
.animated {
  /* 兼容性寫法，duration設置的是持續的時間 */
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  /* 檢索或設置對象動畫時間之外的狀態 both選項就是設置對象狀態為動畫結束或開始的狀態 */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  /* 指定動畫循環可以是無限的(infinite也可以指定具體的循環次數比如9) */
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  /* 設置延遲的時間 */
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}
/* 以下的四個是我們之前說的animate中自定義的時間詞匯 */
.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

/* 這個是媒體查詢相關的 */
/* prefers-reduced-motion 用於檢測用戶的系統是否被開啟了動畫減弱功能。 
reduce
這個值意味着用戶修改了系統設置，將動畫效果最小化，最好所有的不必要的移動都能被移除。
*/
@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}

2. infinite類

• 這個的源碼就在上面了

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  /* 指定動畫循環可以是無限的(infinite也可以指定具體的循環次數比如9) */
  animation-iteration-count: infinite;
}

3. 動畫名類，比如bounce

• 以下是定義具體的動畫代碼，

注意,高大上的bezier曲線。這個timing-function是一個檢索或設置對象動畫的過渡類型的東西，cubic-bezier是貝塞爾曲線，取值在[0,1]之間，需要指定四個值，那么什么是貝塞爾曲線呢？哈哈哈如果你高數沒白學，那你應該能明白這個的工作原理，如果你還不是很清楚，請點擊這里
bezier曲線？計算機圖形原理
體會以下bezier曲線

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

• 你可以看得到，這些代碼，在項目文件夾結構中，animate把source(意為“源”)里面的具體實現代碼合並到一個css文件中（animate.css)，在source文件夾下，這些具體的動畫效果被做了具體的分類與歸檔。

后續給大家帶來一個更加更加實用的css庫,(Hover.css)使用以及源碼剖析，敬請期待