CSS3——過渡（transition）

1、概述

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

A：哪些屬性須要過渡？

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

B：過渡多久完成？

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

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

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

D：多久後開始過分？

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

E：何時執行過渡？

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

綜上所述若是把過渡做爲一個類型的話，則：<過渡> = <property-list, duration, timing-function, delay>

2、語法

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

2.1 transition-property

2.1.1 介紹

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

2.1.2 語法

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

從語法中能夠看到transition-property的取值要麼是none要麼是<single-transition-property>列表。兩種值不一樣共存的，而且"inherit","initial"也不能和<single-transition-property>列表共存。
none：

表示任何屬性都不該用過渡，而且none能夠終止正在執行的過渡。

all：

表示全部可動畫的屬性都應用過渡。注意all關鍵字是一種特殊的<single-transition-property>，他是表示全部屬性的簡潔寫法。因此他能夠和其餘屬性名共存，可是最好不要這樣作。

非all的<single-transition-property>：

屬性的名稱標識符。

2.1.3 用法

A：

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

表示：with屬性應用一個持續時間爲1s的過渡，即<width, 1s, ease, 0s>

B：

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

表示：
with屬性應用一個持續時間爲1s的過渡，即<width, 1s, ease, 0s>
background-color屬性應用一個持續時間爲2s的過渡，即<background-color, 2s, ease, 0s>

C：

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

表示：
with屬性應用一個持續時間爲1s的過渡，即<width, 1s, ease, 0s>
background-color屬性應用一個持續時間爲2s的過渡，即<background-color, 2s, ease, 0s>
height屬性應用一個持續時間爲1s的過渡，即<height, 1s, ease, 0s>

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

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

表示：全部可動畫的屬性應用一個持續5s的過渡，即<all, 5s, ease, 0s>
注意：
該例中all和其餘屬性同存。all關鍵字會致使其餘指定的屬性被忽略，而且根據all的位置相應的肯定過渡其餘值。如該例中all在第二個位置，因此對應的持續時間是5s.

2.2 transition-duration

2.2.1 介紹

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

2.2.2 語法

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

2.2.3 用法

見2.1

2.3 transition-timing-function

2.3.1 介紹

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

1) 階梯函數

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

2) 三次貝茲曲線

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

2.3.2 語法

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

1）CSS3預約義了一些經常使用的階梯函數和貝茲曲線，見W3C。

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

2）自定義的階梯函數：steps(<integer>[, [end| start]?])

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

3）自定義三次貝茲曲線：cublic-bezier(x1, y1, x2, y2)

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

2.3.3 用法【High】

見參考Understanding CSS Timing Functions，裏面列舉了各類舉例。

2.4 transition-delay

2.4.1 介紹

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

2.4.2 語法

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

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

2.4.3 用法

A：

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

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

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

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

2.4.5 Issues/Concern

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

2.5 transition

2.5.1 介紹

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

2.5.2 語法

transition: <single-transition>[, <single-transition>]*
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

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

2.5.3 用法

A：

transition: none;

表示：全部屬性都不該用過渡，等價於transition-property: none;
B：

transition: width 2s

表示： width屬性應用一個持續2s的過渡，即<width, 2s, ease, 0s>

3、過渡的開始【？】

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

3.1 過渡過程當中屬性值發生變化

3.1.1：tansition系列屬性值發生變化：

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

3.1.2：應用過渡的屬性發生變化：

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

注意：

1. DOM元素CSS屬性真實值是隨着漸變過程動態變化的，漸變過程當中獲取元素的屬性值：是當時漸變中的值（處於舊值和新值直接的一個值）。
2. 在插入元素（如 .appendChild()）或改變屬性display: none後當即使用過渡, 元素將視爲沒有開始狀態，始終處於結束狀態。簡單的解決辦法，改變屬性前用 window.setTimeout() 延遲幾毫秒。

4、過渡事件

4.1 介紹

過渡完成後會觸發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];
                }
            }
        })()

5、可動畫屬性

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

6、兼容性

見：
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/