摘要：表示任何屬性都不應用過渡，并且可以終止正在執行的過渡。提供兩種計算曲線階梯函數三次貝茲曲線。在插入元素如或改變屬性后立即使用過渡元素將視為沒有開始狀態，始終處于結束狀態。過渡取消不會觸發該事件。

CSS屬性的值從一個值變成另一個值的過程叫做漸變，重點突出變化的過程。CSS3 transition系列屬性可控制這個變化過程，使得屬性值變化過程更加平滑。一個過渡應包含這幾個屬性：

A：哪些屬性需要過渡？

需要過度的CSS屬性（也就指定舊值和新值）

B：過渡多久完成？

持續時間，即從舊值變成新值的過程持續的時間。這個時間不包含延遲時間。

C：過渡中間值如何計算？

隨著時間的推移，過渡過程中屬性中間值計算方式。

D：多久后開始過度？

延遲多久開始過度，即從屬性值改變到開始執行過渡的時間。

E：什么時候執行過渡？

當屬性值發生變化時執行過渡。這個由瀏覽器控制，不需要作者控制。

綜上所述如果把過渡作為一個類型的話，則：<過渡> =

CSS3通過tansition系列屬性（transition-property, transition-duration, transition-timing-function, transition-delay，transition）控制過渡。

用來指定哪些CSS屬性應用過渡，多個屬性用逗號隔開。

transition-property: none |  [, ]*
 = all | 
默認值：all

從語法中可以看到transition-property的取值要么是none要么是列表。兩種值不同共存的，并且"inherit","initial"也不能和列表共存。
none：

表示任何屬性都不應用過渡，并且none可以終止正在執行的過渡。

all：

表示所有可動畫的屬性都應用過渡。注意all關鍵字是一種特殊的，他是表示所有屬性的簡潔寫法。所以他可以和其他屬性名共存，但是最好不要這樣做。

非all的：

屬性的名稱標識符。

A：

transition-property: width;
transition-duration: 1s;

表示：with屬性應用一個持續時間為1s的過渡，即

B：

transition-property: width, background-color;
transition-duration: 1s, 2s;

表示：
with屬性應用一個持續時間為1s的過渡，即
background-color屬性應用一個持續時間為2s的過渡，即

C：

transition-property: width, background-color, height;
transition-duration: 1s,2s;

表示：
with屬性應用一個持續時間為1s的過渡，即
background-color屬性應用一個持續時間為2s的過渡，即
height屬性應用一個持續時間為1s的過渡，即

注意：
該例中并沒有顯示指定height屬性過渡持續時間。如果transition-property屬性指定值個數多于tansition-duration屬性（transition-timing-function, transition-delay也是這樣）指定的值個數，則會循環重復tansition-duration的值，即此例中transition-duration的值等價于：transition-duration: 1s, 2s, 1s。如果transition-duration的值指定的值個數多于transition-property屬性指定值格式，則多于的被忽略。
D：

transition-property: width, heighttt, background-color;
transition-duration: 1s, 1.5s, 2s;

表示：
with屬性應用一個持續時間為1s的過渡，即
heighttt屬性（雖然該屬性heighttt）應用一個持續時間為1.5s的過渡，即< heighttt, 1s, ease, 0s>
background-color屬性應用一個持續時間為2s的過渡，即
注意：
該例中有個非法屬性heighttt。tansition-property屬性列表中包含非法屬性或者非動畫的屬性也是會創建個過渡，同理也會占用tansition-duration指定的值列表的一個值。
E：

transition-property: width, all, background-color;
transition-duration: 2s, 5s, 0.5s;

表示：所有可動畫的屬性應用一個持續5s的過渡，即
注意：
該例中all和其他屬性同存。all關鍵字會導致其他指定的屬性被忽略，并且根據all的位置相應的確定過渡其他值。如該例中all在第二個位置，所以對應的持續時間是5s.

定義過渡的持續時間，即從過渡開始到過渡結束的時間。

transition-duration:  [, ]*
默認值：0s

見2.1

指定過渡過程中屬性中間值的計算方式。CSS3提供兩種計算曲線：階梯函數（stepping function), 三次貝茲曲線（cubic-beizer）。

階梯函數由兩部分構成（見W3C）：
步數：步數是通過一個整數指定，并且每步的時間長度一樣（即把持續時間等分，并且輸出值也是等分的）
什么時間改變值：指定在每步的什么時間點改變值，只支持兩個時間點：每步的開始和每步的結束。

CSS3提供的三次貝茲曲線由四個點構成（P0-P3)，其中P0（0，0）， P3(1,1)是固定的。作者只能控制p1,p2點的位置來控制貝茲曲線。

transition-timing-function: [, ]*
 = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)
x1,y1, x2, y2 = 

ease: 平滑（先加速（加速時間短），后減速）
linear: 線性
ease-in: 加速
ease-out: 減速
ease-in-out: 先加速，后減速（加速、減速時間相等）

通過steps函數可以自定義階梯函數，參數1指定步數，參數2指定改變值的時間點。start表示在每步的開始改變值，end表示在每步的結束改變值。參數2是可選的，缺省時取值end。

通過cublic-bezier函數自定義三次貝茲曲線。指定p1, p2點位置（p0, p3是固定值），其中x軸的取值范圍只能是[0, 1]，而y軸的取值不受限制。更好了查看貝茲曲線效果參考http://cubic-bezier.com/

見參考Understanding CSS Timing Functions，里面列舉了各種舉例。

指定過渡延遲執行的時間，即從DOM元素CSS屬性值發生變化（賦值個新目標值）到DOM元素開始執行過渡之間的時間。

transition-delay: [, ]*
默認值：0s

延遲時間可以為負值，為負值時會立馬執行過渡（就像沒有延遲一樣），但是起始值是過渡執行一段時間（延遲時間的絕對值）時的值。換句話說，負值延遲時間X表示當屬性值發生變化時延遲已經在X時間前完成了，并且已經執行過渡X時間了。實際用戶看到的過渡時間比實際執行事件少了X事件。比如-2s，表示在屬性值發生變化時已經執行過渡2s了，并且當前的屬性的起始值應該是執行過渡2s時的值。

A：

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: .5s;

表示：
width屬性應用一個持續1s, 延遲0.5s，時間函數為linear的過渡，
B:

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: -.5s; /* 延遲時間為負值 */

表示：
width屬性應用一個持續1s, 延遲-0.5s，時間函數為linear的過渡，，用戶體驗的過渡時間應該是0.5s.

A：負值延遲時間會影響實際過渡執行的時間。

transition是其他transition-屬性的簡潔方式。

transition: [, ]*
 = [ none |  ] ||  ||  || 

注意在tansition屬性中有兩個類型的值（持續時間，延遲時間），規定前面的時間是持續時間，后面的表示延遲時間。

A：

transition: none; 

表示：所有屬性都不應用過渡，等價于transition-property: none;
B：

transition: width 2s

表示： width屬性應用一個持續2s的過渡，即

當一個可動畫的屬性的計算值發生變化時，瀏覽器就根據tansition系列屬性的值決定給該屬性應用什么樣的過渡。

過渡過程中tansition屬性發生變化并不會影響本次過渡，除了tansition-property的none取值（會終止當前過渡）

終止當前過渡，并根據新的值應用一個新的過渡。

DOM元素CSS屬性真實值是隨著漸變過程動態變化的，漸變過程中獲取元素的屬性值：是當時漸變中的值（處于舊值和新值直接的一個值）。

在插入元素（如 .appendChild()）或改變屬性display: none后立即使用過渡, 元素將視為沒有開始狀態，始終處于結束狀態。簡單的解決辦法，改變屬性前用 window.setTimeout() 延遲幾毫秒。

過渡完成后會觸發TransitionEvent事件。過渡取消不會觸發該事件。

var transitionProperty = (function() {
            var t,
                el = document.createElement("surface"),
                transitions = {
                    "transition": {
                        eventName: "transitionend",
                        cssName: "transition"
                    },
                    "OTransition": {
                        eventName: "oTransitionEnd",
                        cssName: "-o-transition"
                    },
                    "MozTransition": {
                        eventName: "transitionend",
                        cssName: "-moz-transition"
                    },
                    "WebkitTransition": {
                        eventName: "webkitTransitionEnd",
                        cssName: "-webkit-transition"
                    }
                }

            for(t in transitions){
                if( el.style[t] !== undefined ){
                    return transitions[t];
                }
            }
        })()

哪些屬性可以應用transition：只能是可動畫的CSS屬性可以應用。

見：
http://caniuse.com/#search=tr...
https://developer.mozilla.org...

W3C： https://www.w3.org/TR/css3-tr...
MDN：https://developer.mozilla.org...
W3C+：http://www.w3cplus.com/conten...
cubic-beizer詳解：http://www.candoudou.com/arch...
Understanding CSS Timing Functions【High】：https://www.smashingmagazine....
【工具】
緩動函數（更直觀的查看過渡動畫）：http://easings.net/zh-cn
在線繪制貝茲曲線【High】：http://cubic-bezier.com/