CSS3——過渡（transition）

普拉斯發表於2017-07-19
CSSS3

一、概述

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

A：哪些屬性需要過渡？

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

B：過渡多久完成？

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

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

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

D：多久後開始過度？

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

E：什麼時候執行過渡？

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

綜上所述如果把過渡作為一個型別的話，則：<過渡> = <property-list, duration, timing-function, delay>

二、語法

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 介紹

指定過渡延遲執行的時間，即從屬性值發生變化到開始執行過渡的時間。

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>

三、過渡的開始【？】

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

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

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

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

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

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

四、過渡事件

4.1 介紹

過渡完成後會觸發TransitionEvent事件。過渡終止不會觸發該事件。

4.2 transitionend事件

五、可動畫屬性

哪些屬性可以應用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/

相關文章