隨着HTML5規范的不斷完善，圍繞着這一生態有很多實用的框架，極大的提高了我們的開發效率，常見的框架代表有：UI層面的有Bootstrap、Yui、JqueryUI、CSS3Lib等，JS層面的有JQuery、Zeptojs、Angularjs、React、Vuejs等，還有很多常用的動畫庫、字體圖標，比如：Animate、Wow、Iconfont、Iconmoon等。
這些前端框架典型的特點：簡單易用、相通性強，我們可以在學習一個框架后快速上手其他框架。
主要知識點：Animate、WOW.js、 scrollReveal.js、Zepto.js、Bootstrap、 jQuery 等
1.Animate
-
Animate.css是一個css動畫樣式庫，其目標是讓CSS動畫像喝水一樣容易（Just-add-water CSS Animation）。
-
animate.css is a bunch of cool, fun, add cross-brower animations foy you to use in your projects. Greate for emphasis, home pages, sliders, and general jus-add-water-awesomeness.(animate.css是有一堆狂拽酷炫吊炸天、跨瀏覽器的動畫特效的綜合動畫庫)
-
animate.css是一個來自國外的CSS3動畫庫，它預設了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn \/ rotateOut）、淡入淡出（fadeIn \/ fadeOut）等多達70多種動畫特效，幾乎包含了所有常見的動畫特效。
-
重點：瀏覽器兼容，animate.css底層是通過css3實現的，當然是只兼容支持CSS3 animate屬性的瀏覽器： IE10+、Firefox、Chrome、Opera、Safari
官網： https://daneden.github.io/animate.css/
github: https://github.com/daneden/animate.css
1.wow
官網：http://mynameismatthieu.com/WOW/
github: https://github.com/matthieua/WOW
1 核心作用：讓頁面滾動更有趣
通過WOW.js，可以在頁面逐漸向下滾動的過程中逐漸釋放這些動畫效果。也就是說：當我們向下滾動頁面時，可以省去很多判斷條件，讓CSS動畫逐漸展示出來。
2 特點
輕量級類庫， 不依賴jQuery，超簡單的安裝和使用，與animate.css配合，只需要短短幾行代碼就可以實現很多特效。容易定制，我們可以改變動畫去設置喜歡的風格、延遲、長度、偏移和迭代等等。
3 兼容性考慮
因為，WOW要和Animate配合使用，所有其也只兼容支持CSS3 animate屬性的瀏覽器：IE10+、Firefox、Chrome、Opera、Safari。
A.WOW的常用屬性
data-wow-delay: 動畫開始前延遲
data-wow-duration: 動畫持續時長
data-wow-iteration: 動畫重復次數
data-wow-offset: 瀏覽器底部到指定item的頂部的距離（偏移量）
來搞定它? 可以加入data-wow-duration（動畫持續時間）和data-wow-delay（動畫延遲時間）等屬性。比如：
<div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s"></div> <div class="wow slideInRight" data-wow-iteration="5"></div>
data-wow-offset：用於決定當前的元素在滾動的時候 , 到達怎樣的位置出現（是在滾動之前出現、滾動之后出現，還是滾動的時候出現）http://mynameismatthieu.com/WOW/
B.WOW的默認配置參數
var wow = new WOW({
boxClass: 'wow', // 動畫元素的CSS類（默認類名wow）
animateClass:'animated', // 動畫CSS類 （默認類名animated）
offset: 0, // 距離可視區域多少開始執行動畫（默認為0）
mobile: true, // 是否在移動設備上執行動畫 （默認是true）
});
wow.init();
WOW.js實例的動畫只能加載一次，如果要重新執行動畫必須要進行刷新。
3.scrollReveal
scrollReveal是一個兼容PC端和移動設備的滾動-動畫庫。不同的是 WOW.js 的動畫只播放一次，而 scrollReveal.js 的動畫可以播放一次或無限次；
1.特點
scrollReveal同時兼容PC端和移動端；
0依賴（不依賴於jQuery，也不依賴於animate.css）;
定制性高，使用簡單方便快捷。
2.瀏覽器兼容
雖然scrollReveal.js不依賴於animate.css，但是它的動畫也是用CSS3創建的，所以依然需要支持HTML5和CSS3比較好的瀏覽器，比如：IE10+、Firefox、Chrome、Opera、Safari。
官網：https://scrollrevealjs.org/
github: https://github.com/jlmakes/scrollreveal
對應的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#main {
width: 800px;
margin: 20px auto;
/*background-color: skyblue;*/
list-style: none;
}
#main .box{
width: 200px;
height: 300px;
background-color: skyblue;
float: left;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<ul id="main">
<li class="box">1</li>
<li class="box">2</li>
<li class="box">3</li>
.........
<li class="box">30</li>
</ul>
</script>
</body>
</html>
常用的參數
var config = {
reset: false, // 滾動鼠標時，動畫開關（如果為true, 動畫可以執行n次）
origin: 'bottom', // 動畫開始的方向
duration: 500, // 動畫持續時間
delay: 0, // 延遲
rotate: {x:0, y:0, z:0}, // 過度到0的初始角度
opacity: 0, // 初始透明度
scale: 0.9, //縮放
easing: 'cubic-bezier(0.1, 0.2, 0.3, 0.4)', // 動畫效果'ease', 'ease-in-out'，'linear'...
// 回調函數
//動畫開始前調用
beforeReveal: function(domEl){},
//滾動鼠標之前調用
beforeReset: function(domEl){},
//動畫開始后調用
afterReveal: function(domEl){},
//滾動鼠標之后調用
afterReset: function(domEl){}
};
window.sr = ScrollReveal();
sr.reveal('.sr', config);
給某個盒子設計動畫
window.onload=function () {
var config = {
reset: true,
// rotate: {x:50, y:70, z:50}, // 過度到0的初始角度
};
var config1 = {
reset: true,
rotate: {x:0, y:0, z:90}, // 過度到0的初始角度
scale: 2,
duration: 1500, // 動畫持續時間
};
//1.拿到ScrollReveal對象
window.sr= ScrollReveal();
//2.開始動畫
sr.reveal('.box',config);
//3.開始動畫
sr.reveal('#test12',config1);
}