摘要：備注沒整理格式，抱歉動(dòng)畫實(shí)現(xiàn)的幾種方式性能排序?qū)崿F(xiàn)方式自身調(diào)用調(diào)用的定時(shí)器值推薦最小使用的原因即每秒幀為什么倒計(jì)時(shí)動(dòng)畫一定要用而避免使用兩者區(qū)別及引發(fā)的線程討論線程討論為什么單線程是的一大特性。

備注：沒整理格式，抱歉

動(dòng)畫實(shí)現(xiàn)的幾種方式：性能排序
js < requestAnimationFrame js實(shí)現(xiàn)方式：
1.setTimeout 自身調(diào)用 eg1
2.setInterval 調(diào)用 eg2
setTimeout的定時(shí)器值推薦最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60幀）
為什么倒計(jì)時(shí)動(dòng)畫一定要用setTimeout而避免使用setInterval-------兩者區(qū)別及setTimeout引發(fā)的js線程討論
1.js線程討論
1.1 為什么：單線程是JavaScript的一大特性。
JavaScript是瀏覽器用來與用戶進(jìn)行交互、進(jìn)行DOM操作的，這也使得了它必須是單線程這一特性。比如你去修改一個(gè)元素的DOM，同時(shí)又去刪除這個(gè)元素，那么瀏覽器應(yīng)該聽誰的？
1.2 js單線程工作機(jī)制是：當(dāng)線程中沒有執(zhí)行任何同步代碼的前提下才會(huì)執(zhí)行異步代碼

var t = true;
window.setTimeout(function (){
    t = false;},1000);
while (t){}
alert("end")

JavaScript引擎是單線程運(yùn)行的,瀏覽器只有一個(gè)線程在運(yùn)行JavaScript程序
1.3 瀏覽器工作基本原理
一、瀏覽器的內(nèi)核是多線程的，內(nèi)核制控下保持同步，
至少實(shí)現(xiàn)三個(gè)常駐線程：javascript引擎線程，GUI渲染線程，瀏覽器事件觸發(fā)線程（http請(qǐng)求線程等）

javascript引擎是基于事件驅(qū)動(dòng)單線程執(zhí)行的，JS引擎一直等待著任務(wù)隊(duì)列中任務(wù)的到來，然后加以處理，瀏覽器無論什么時(shí)候都只有一個(gè)JS線程在運(yùn)行JS程序。

GUI渲染線程負(fù)責(zé)渲染瀏覽器界面，當(dāng)界面需要重繪（Repaint）或由于某種操作引發(fā)回流(reflow)時(shí),該線程就會(huì)執(zhí)行。

但需要注意 GUI渲染線程與JS引擎是互斥的，當(dāng)JS引擎執(zhí)行時(shí)GUI線程會(huì)被掛起，GUI更新會(huì)被保存在一個(gè)隊(duì)列中等到JS引擎空閑時(shí)立即被執(zhí)行。

事件觸發(fā)線程，當(dāng)一個(gè)事件被觸發(fā)時(shí)該線程會(huì)把事件添加到待處理隊(duì)列的隊(duì)尾，等待JS引擎的處理。異步事件：如setTimeOut、瀏覽器內(nèi)核的其他線程如鼠標(biāo)點(diǎn)擊、AJAX異步請(qǐng)求等，（當(dāng)線程中沒有執(zhí)行任何同步代碼的前提下才會(huì)執(zhí)行異步代碼）

也就是說即使setTimeout為0，他也是等js引擎的代碼執(zhí)行完之后才會(huì)插入到j(luò)s引擎線程的最后執(zhí)行。
1.4 JavaScript中任務(wù)，一種是同步任務(wù)，一種是異步任務(wù)。
同步任務(wù)：各個(gè)任務(wù)按照文檔定義的順序一一推入"執(zhí)行棧"中，當(dāng)前一個(gè)任務(wù)執(zhí)行完畢，才會(huì)開始執(zhí)行下一個(gè)任務(wù)。
異步任務(wù)：各個(gè)任務(wù)推入"任務(wù)隊(duì)列"中，只有在當(dāng)前的所有同步任務(wù)執(zhí)行完畢，才會(huì)將隊(duì)列中的任務(wù)"出隊(duì)"執(zhí)行。（注：這里的異步任務(wù)并不一定是按照文檔定義的順序推入隊(duì)列中）
//只有用戶觸發(fā)點(diǎn)擊事件才會(huì)被推入隊(duì)列中（如果點(diǎn)擊時(shí)間小于定時(shí)器指定的時(shí)間，則先于定時(shí)器推入，否則反之）
1.5 "任務(wù)隊(duì)列是什么？異步任務(wù)通常包括哪些？"
任務(wù)隊(duì)列(event loop)：你可理解為用于存放事件的隊(duì)列，當(dāng)執(zhí)行一個(gè)異步任務(wù)時(shí)，就相當(dāng)于執(zhí)行任務(wù)的回調(diào)函數(shù)。
通常io（ajax獲取服務(wù)器數(shù)據(jù))、用戶/瀏覽器自執(zhí)行事件（onclick、onload、onkeyup等等）以及定時(shí)器（setTimeout、setInterval）都可以算作異步操作。

先來看一段代碼來理解一下

console.log("1");
setTimeout(function(){
console.log("2");
},1000);
console.log("3");
setTimeout(function(){
console.log("4");
},0);
輸出結(jié)果: 1->3->4->2.

那么在來看你這段代碼。

var t = true;
window.setTimeout(function (){
t = false
},1000);
while (t){}
alert("end");
1.6 setTimeOut的討論

參數(shù)
描述
code
必需。要調(diào)用的函數(shù)后要執(zhí)行的 JavaScript 代碼串。
millisec
必需。在執(zhí)行代碼前需等待的毫秒數(shù)。

提示：setTimeout() 只執(zhí)行 code 一次。如果要多次調(diào)用，請(qǐng)使用 setInterval() 或者讓 code 自身再次
原理：setTimeout調(diào)用的時(shí)候，JavaScript引擎會(huì)啟動(dòng)定時(shí)器timer，當(dāng)定時(shí)器時(shí)間到，就把該事件放到主事件隊(duì)列等待處理。
注意：瀏覽器JavaScript線程空閑的時(shí)候才會(huì)真正執(zhí)行 ep3
millisec參數(shù)有什么用？
那么問題來了。setTimeout(handler,0)和setTimeout(handler,100)在多帶帶使用時(shí)，好像并沒有區(qū)別。（中間執(zhí)行的代碼處理時(shí)間超過100ms時(shí)）
millisec一般在多個(gè)setTimeout一起使用的時(shí)，需要區(qū)分哪個(gè)先加入到隊(duì)列的時(shí)候才有用，否則都可以設(shè)置成setTimeout(handler,0)
1.7 SetTimeout 與 setInterval的區(qū)別

setTimeout(function(){
/* 代碼塊... */
setTimeout(arguments.callee, 10);
}, 10);
setInterval(function(){
/*代碼塊... */
}, 10);

setTimeout遞歸執(zhí)行的代碼必須是上一次執(zhí)行完了并間格一定時(shí)間才再次執(zhí)行
比仿說: setTimeout延遲時(shí)間為1秒執(zhí)行, 要執(zhí)行的代碼需要2秒來執(zhí)行,那這段代碼上一次與下一次的執(zhí)行時(shí)間為3秒. 而不是我們想象的每1秒執(zhí)行一次.
setInterval是排隊(duì)執(zhí)行的
比仿說: setInterval每次執(zhí)行時(shí)間為1秒,而執(zhí)行的代碼需要2秒執(zhí)行, 那它還是每次去執(zhí)行這段代碼, 上次還沒執(zhí)行完的代碼會(huì)排隊(duì), 上一次執(zhí)行完下一次的就立即執(zhí)行, 這樣實(shí)際執(zhí)行的間隔時(shí)間為2秒
這樣的話在我看來, 如果setInterval執(zhí)行的代碼時(shí)間長度比每次執(zhí)行的間隔段的話,就沒有意義,并且隊(duì)伍越來越長,內(nèi)存就被吃光了.如果某一次執(zhí)行被卡住了,那程序就會(huì)被堵死
巨坑無比的setInterval
定時(shí)器的代碼可能在代碼還沒有執(zhí)行完成再次被添加到隊(duì)列，結(jié)果導(dǎo)致循環(huán)內(nèi)的判斷條件不準(zhǔn)確，代碼多執(zhí)行幾次，之間沒有停頓。
JavaScript已經(jīng)解決這個(gè)問題，當(dāng)使用setInterval（）時(shí)，僅當(dāng)沒有該定時(shí)器的其他代碼實(shí)例時(shí)才將定時(shí)器代碼插入隊(duì)列。這樣確保了定時(shí)器代碼加入到隊(duì)列的最小時(shí)間間隔為指定間隔

某些間隔會(huì)被跳過

2.多個(gè)定時(shí)器的代碼執(zhí)行之間的間隔可能比預(yù)期要小

大前端團(tuán)隊(duì) > 前端動(dòng)畫實(shí)現(xiàn) > image2017-11-28 14:24:25.png
5處，創(chuàng)建一個(gè)定時(shí)器
205處，添加一個(gè)定時(shí)器，但是onclick代碼沒執(zhí)行完成，等待
300處，onclick代碼執(zhí)行完畢，執(zhí)行第一個(gè)定時(shí)器
405處，添加第二個(gè)定時(shí)器，但前一個(gè)定時(shí)器沒有執(zhí)行完成，等待
605處，本來是要添加第三個(gè)定時(shí)器，但是此時(shí)發(fā)現(xiàn)，隊(duì)列中有了一個(gè)定時(shí)器，被跳過
等到第一個(gè)定時(shí)器代碼執(zhí)行完畢，馬上執(zhí)行第二個(gè)定時(shí)器，所以間隔會(huì)比預(yù)期的小。
二 CSS3動(dòng)畫
1.tansition

transition-property 要運(yùn)動(dòng)的樣式 （all || [attr] || none）
transition-duration 運(yùn)動(dòng)時(shí)間
transition-delay 延遲時(shí)間
transition-timing-function 運(yùn)動(dòng)形式
ease：（逐漸變慢）默認(rèn)值
linear：（勻速）
ease-in：(加速)
ease-out：（減速）
ease-in-out：（先加速后減速）
cubic-bezier 貝塞爾曲線（ x1, y1, x2, y2 ） http://matthewlein.com/ceaser/

transition的完整寫法如下

img { 
   transition: 1s 1s height ease;
}

多帶帶定義成各個(gè)屬性。

img{ 
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
}

/可以多個(gè)動(dòng)畫同時(shí)運(yùn)動(dòng)/用逗號(hào)隔開

transition:1s width,2s height,3s background;

/可以在動(dòng)畫完成時(shí)間之后添加動(dòng)畫延遲執(zhí)行的時(shí)間/

transition:1s width,2s 1s height,3s 3s background;

過渡完成事件

// Webkit內(nèi)核： 
obj.addEventListener("webkitTransitionEnd",function(){},false);
// firefox: 
obj.addEventListener("transitionend",function(){},false);
/*tansition動(dòng)畫發(fā)生在樣式改變的時(shí)候*/
function addEnd(obj,fn) ---封裝適應(yīng)與各個(gè)瀏覽器的動(dòng)畫結(jié)束
{   
    //動(dòng)畫執(zhí)行完執(zhí)行該函數(shù)
    obj.addEventListener("WebkitTransitionEnd",fn,false);
    obj.addEventListener("transitionend",fn,false); //標(biāo)準(zhǔn)
}
addEnd(oBox,function(){
    alert("end");   
});
// 面臨兩個(gè)bug：1.tansition中有多個(gè)動(dòng)畫時(shí)，每個(gè)執(zhí)行完，都會(huì)有一個(gè)結(jié)束彈出
           // 2.發(fā)生重復(fù)調(diào)用的情況--需要移除
//移除動(dòng)畫執(zhí)行完的操作
function removeEnd(obj,fn)
}
    obj.removeEventListener("transitionend",fn,false);
    obj.removeEventListener("WebkitTransitionEnd",fn,false);
{

使用注意

（1）不是所有的CSS屬性都支持transition
http://oli.jp/2010/css-animatable-properties/
http://leaverou.github.io/animatable/
（2）transition需要明確知道，開始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值，才能計(jì)算出中間狀態(tài)
transition的局限
transition的優(yōu)點(diǎn)在于簡單易用，但是它有幾個(gè)很大的局限。
（1）transition需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時(shí)自動(dòng)發(fā)生。
（2）transition是一次性的，不能重復(fù)發(fā)生，除非一再觸發(fā)。
（3）transition只能定義開始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)，也就是說只有兩個(gè)狀態(tài)。
（4）一條transition規(guī)則，只能定義一個(gè)屬性的變化，不能涉及多個(gè)屬性。

CSS Animation就是為了解決這些問題而提出的。
2.transform

rotate() 旋轉(zhuǎn)函數(shù) 取值度數(shù) deg 度數(shù) -origin 旋轉(zhuǎn)的基點(diǎn)
skew() 傾斜函數(shù) 取值度數(shù)
skewX()
skewY()
scale() 縮放函數(shù) 取值 正數(shù)、負(fù)數(shù)和小數(shù)
scaleX()
scaleY()
translate() 位移函數(shù)
translateX()
translateY()

Transform 執(zhí)行順序問題 — 后寫先執(zhí)行

-webkit-transform:rotate(360deg);
旋轉(zhuǎn)原點(diǎn)可以是關(guān)鍵字+像素位置：相對(duì)于左上角作為零點(diǎn)：正為下，右
-webkit-transform-origin:right bottom;
-webkit-transform-origin:200px 200px;
一個(gè)transform可以有多個(gè)值：
 -webkit-transform:rotate(360deg) scale(0.2);
-webkit-transform:skewX(45deg);
-webkit-transform:skewY(45deg); 
-webkit-transform:skew(15deg,30deg);

3.Animation 關(guān)鍵幀——keyFrames
只需指明兩個(gè)狀態(tài)，之間的過程由計(jì)算機(jī)自動(dòng)計(jì)算
關(guān)鍵幀的時(shí)間單位
數(shù)字：0%、25%、100%等
字符：from(0%)、to(100%)
格式

@keyframes 動(dòng)畫名稱
{
動(dòng)畫狀態(tài)
}
@keyframes miaov_test
{
from { background:red; }
to { background:green; }
}

可以只有to
必要屬性
animation-name 動(dòng)畫名稱（關(guān)鍵幀名稱）
animation-duration 動(dòng)畫持續(xù)時(shí)間
屬性：
animation-play-state 播放狀態(tài)（ running 播放 和paused 暫停 ）
animation-timing-function 動(dòng)畫運(yùn)動(dòng)形式
linear 勻速。
ease 緩沖。
ease-in 由慢到快。
ease-out 由快到慢。
ease-in-out 由慢到快再到慢。
cubic-bezier(number, number, number, number)： 特定的貝塞爾曲線類型，4個(gè)數(shù)值需在[0, 1]區(qū)間內(nèi)
animation-delay 動(dòng)畫延遲只是第一次
animation-iteration-count 重復(fù)次數(shù)/infinite為無限次
animation-direction 播放前重置/動(dòng)畫是否重置后再開始播放
alternate 動(dòng)畫直接從上一次停止的位置開始執(zhí)行
normal 動(dòng)畫第二次直接跳到0%的狀態(tài)開始執(zhí)行
reverse
alternate-reverse
animation-fill-mode
forwards 讓動(dòng)畫保持在結(jié)束狀態(tài)
none：默認(rèn)值，回到動(dòng)畫沒開始時(shí)的狀態(tài)。
backwards：讓動(dòng)畫回到第一幀的狀態(tài)。
both: 根據(jù)animation-direction（見后）輪流應(yīng)用forwards和backwards規(guī)則。
animation-play-state
paused
running
動(dòng)畫播放過程中，會(huì)突然停止。這時(shí)，默認(rèn)行為是跳回到動(dòng)畫的開始狀態(tài)，想讓動(dòng)畫保持突然終止時(shí)的狀態(tài)，就要使用animation-play-state屬性
大前端團(tuán)隊(duì) > 前端動(dòng)畫實(shí)現(xiàn) > image2017-11-28 14:29:8.png
animation也是一個(gè)簡寫形式

div:hover { 
    animation: 1s 1s rainbow linear 3 forwards normal;
}

分解成各個(gè)多帶帶的屬性

div:hover { 
    animation-name: rainbow;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-fill-mode:forwards;
    animation-direction: normal;
    animation-iteration-count: 3;
}

Animation與Js的結(jié)合
通過class,在class里加入animation的各種屬性
直接給元素加-webkit-animation-xxx樣式
animation的問題
寫起來麻煩
沒法動(dòng)態(tài)改變目標(biāo)點(diǎn)位置
animation的函數(shù)：

obj.addEventListener("webkitAnimationEnd", function (){}, false);

實(shí)例1：無縫滾動(dòng)
animation的step
eg: http://dabblet.com/gist/1745856
animation-timing-function: steps(30, end)
1.什么時(shí)候使用：
animation默認(rèn)以ease方式過渡，它會(huì)在每個(gè)關(guān)鍵幀之間插入補(bǔ)間動(dòng)畫，所以動(dòng)畫效果是連貫性的,除了ease，linear、cubic-bezier之類的過渡函數(shù)都會(huì)為其插入補(bǔ)間。但有些效果不需要補(bǔ)間，只需要關(guān)鍵幀之間的跳躍，這時(shí)應(yīng)該使用steps過渡方式
大前端團(tuán)隊(duì) > 前端動(dòng)畫實(shí)現(xiàn) > image2017-11-28 14:29:45.png
線性動(dòng)畫： http://sandbox.runjs.cn/show/...
幀動(dòng)畫：http://sandbox.runjs.cn/show/...
2.step使用：
語法：
steps(number[, end | start])
參數(shù)說明：
number參數(shù)指定了時(shí)間函數(shù)中的間隔數(shù)量（必須是正整數(shù)）
第二個(gè)參數(shù)是可選的，可設(shè)值：start和end，表示在每個(gè)間隔的起點(diǎn)或是終點(diǎn)發(fā)生階躍變化，如果忽略，默認(rèn)是end。
大前端團(tuán)隊(duì) > 前端動(dòng)畫實(shí)現(xiàn) > image2017-11-28 14:30:37.png
橫軸表示時(shí)間，縱軸表示動(dòng)畫完成度（也就是0%~100%）。
第一個(gè)圖，steps(1, start)將動(dòng)畫分為1段，跳躍點(diǎn)為start，也就是說動(dòng)畫在每個(gè)周期的起點(diǎn)發(fā)生階躍（即圖中的空心圓 → 實(shí)心圓）。由于只有一段，后續(xù)就不再發(fā)生動(dòng)畫了。
第二個(gè)圖，steps(1, end)同樣是將動(dòng)畫分為1段，但跳躍點(diǎn)是end，也就是動(dòng)畫在每個(gè)周期的終點(diǎn)發(fā)生階躍，也是圖中的空心圓 → 實(shí)心圓，但注意時(shí)間，是在終點(diǎn)才發(fā)生動(dòng)畫。
第三個(gè)圖，steps(3, start)將動(dòng)畫分為三段，跳躍點(diǎn)為start，動(dòng)畫在每個(gè)周期的起點(diǎn)發(fā)生階躍（即圖中的空心圓 → 實(shí)心圓）。在這里，由于動(dòng)畫的第一次階躍是在第一階段的起點(diǎn)處（0s），所以我們看到的動(dòng)畫的初始狀態(tài)其實(shí)已經(jīng)是 1/3 的狀態(tài)，因此我們看到的動(dòng)畫的過程為 1/3 → 2/3 → 1 。
第四個(gè)圖，steps(3, end)也是將動(dòng)畫分為三段，但跳躍點(diǎn)為end，動(dòng)畫在每個(gè)周期的終點(diǎn)發(fā)生階躍（即圖中的空心圓 → 實(shí)心圓）。雖然動(dòng)畫的狀態(tài)最終會(huì)到達(dá)100%，但是動(dòng)畫已經(jīng)結(jié)束，所以100%的狀態(tài)是看不到的，因此我們最終看到的動(dòng)畫的過程是0 → 1/3 → 2/3。
https://idiotwu.me/study/timi...
steps第一個(gè)參數(shù)的錯(cuò)誤的理解：
第一個(gè)參數(shù) number 為指定的間隔數(shù)，即把動(dòng)畫分為 n 步階段性展示，估計(jì)大多數(shù)人理解就是keyframes寫的變化次數(shù)
@-webkit-keyframes circle { 0% {background-position-x: 0;} 100%{background-position-x: -400px;} }
@-webkit-keyframes circle { 0% {} 25%{} 50%{} 75%{} 100%{} }
如果有多個(gè)幀動(dòng)畫
@-webkit-keyframes circle { 0% {background-position-x: 0;} 50% {background-position-x: -200px;} 100%{background-position-x: -400px;} }
0-25 之間變化5次， 25-50之間 變化5次 ，50-75 之間變化5次，以此類推
應(yīng)用：
Sprite 精靈動(dòng)畫 2D游戲
https://idiotwu.me/css3-runni...
4.3D轉(zhuǎn)換
父容器：
transform-style（preserve-3d） 建立3D空間
Perspective 景深
Perspective- origin 景深基點(diǎn)
子元素：
Transform 新增函數(shù)
rotateX()
rotateY()
rotateZ()
translateZ()
scaleZ()
實(shí)例1：3D盒子
http://beiyuu.com/css3-animation
使用實(shí)例：
requestAnimationFrame
是什么
js的一個(gè)API
該方法通過在系統(tǒng)準(zhǔn)備好繪制動(dòng)畫幀時(shí)調(diào)用該幀，從而為創(chuàng)建動(dòng)畫網(wǎng)頁提供了一種更平滑更高效的方法
使用
var handle = setTimeout(renderLoop, PERIOD);
var handle = window.requestAnimationFrame(renderLoop);
window.cancelAnimationFrame(handle);
為什么出現(xiàn)
css:

統(tǒng)一的向下兼容策略 IE8, IE9之流

CSS3動(dòng)畫不能應(yīng)用所有屬性 scrollTop值。如果我們希望返回頂部是個(gè)平滑滾動(dòng)效果

CSS3支持的動(dòng)畫效果有限 CSS3動(dòng)畫的貝塞爾曲線是一個(gè)標(biāo)準(zhǔn)3次方曲線

緩動(dòng)(Tween)知識(shí)：
Linear：無緩動(dòng)效果
Quadratic：二次方的緩動(dòng)（t^2）
Cubic：三次方的緩動(dòng)（t^3）
Quartic：四次方的緩動(dòng)（t^4）
Quintic：五次方的緩動(dòng)（t^5）
Sinusoidal：正弦曲線的緩動(dòng)（sin(t)）
Exponential：指數(shù)曲線的緩動(dòng)（2^t）
Circular：圓形曲線的緩動(dòng)（sqrt(1-t^2)）
Elastic：指數(shù)衰減的正弦曲線緩動(dòng)
超過范圍的三次方緩動(dòng)（(s+1)t^3 – st^2）
指數(shù)衰減的反彈緩動(dòng)
js:
1.延遲時(shí)間固定導(dǎo)致了動(dòng)畫過度繪制，浪費(fèi) CPU 周期以及消耗額外的電能等問題
2.即使看不到網(wǎng)站，特別是當(dāng)網(wǎng)站使用背景選項(xiàng)卡中的頁面或?yàn)g覽器已最小化時(shí)，動(dòng)畫都會(huì)頻繁出現(xiàn)
大前端團(tuán)隊(duì) > 前端動(dòng)畫實(shí)現(xiàn) > image2017-11-28 14:31:6.png
相當(dāng)一部分的瀏覽器的顯示頻率是16.7ms
搞個(gè)10ms setTimeout，就會(huì)是下面一行的模樣——每第三個(gè)圖形都無法繪制
顯示器16.7ms刷新間隔之前發(fā)生了其他繪制請(qǐng)求(setTimeout)，導(dǎo)致所有第三幀丟失，繼而導(dǎo)致動(dòng)畫斷續(xù)顯示（堵車的感覺），這就是過度繪制帶來的問題

requestAnimationFrame 與setTimeout相似，都是延遲執(zhí)行，不過更智能，跟著瀏覽器的繪制走，如果瀏覽設(shè)備繪制間隔是16.7ms，那我就這個(gè)間隔繪制；如果瀏覽設(shè)備繪制間隔是10ms, 我就10ms繪制，瀏覽器（如頁面）每次要重繪，就會(huì)通知(requestAnimationFrame)
頁面最小化了，或者被Tab切換當(dāng)前頁面不可見。頁面不會(huì)發(fā)生重繪
兼容性
Android設(shè)備不支持，其他設(shè)備基本上跟CSS3動(dòng)畫的支持一模一樣
https://developer.mozilla.org...