以下內容根據官方規范翻譯以及自己的理解整理。

1.介紹

這篇文檔介紹能夠實現隱式過渡的CSS新特性。文檔中介紹的CSS新特性描述了CSS屬性的值如何在給定的時間內平滑地從一個值變為另一個值。

2.過渡transitions

通常情況下，當CSS屬性發生改變時，對應元素的CSS屬性值立即從舊值變為新值，渲染結果也是立即更新。這部分介紹一種方法，可以通過使用新的CSS屬性指定過渡的過程。這些新屬性讓元素以平滑動畫的形式逐漸地從舊狀態過渡到新狀態。

比如，假設一個元素的left屬性和background-color屬性被設置了1s的過渡：位置從左到右，背景顏色從紅色到藍色（其他的過渡參數為默認值）。下面的圖展示了這個元素的過渡過程。

left和background-color的過渡

過渡是一個視覺效果。被設置了過渡的屬性的值逐漸地從舊值變為新值，因此如果一個腳本查詢了正處在過渡過程中的元素的屬性值，那么它將得到一個表示當前動畫狀態的中間值。

只有可動畫的CSS屬性才能設置過渡，具體看Properties from CSS，了解哪些屬性是可動畫屬性。

給一個屬性設置過渡要使用幾個新的CSS屬性。比如：

例1

div {
  transition-property: opacity;
  transition-duration: 2s;
}

上面這個例子在opacity屬性上定義了一個過渡（transition）。如果一個新值被指定給opacity，那么舊值就會用兩秒鐘的時間逐漸地變為新值。

transition的每個分屬性都可指定一個以逗號分隔的值列表，允許指定多個屬性的過渡，每個過渡對應不同的屬性。在下面的例子中，每個過渡按照其在列表中的順序匹配參數。

例2

div {
  transition-property: opacity, left;
  transition-duration: 2s, 4s;
}

這個例子中opacity屬性對應的過渡時間為2s，left屬性對應的過渡時間為4s。

在下面的例子中，transition的分屬性的值列表長度不一樣長。當過渡（transitions）開始時，transition-property屬性的列表長度決定了其他分屬性的值列表的條目數。值列表的匹配從第一個值開始，最后多余的值被忽略。如果有分屬性的以逗號分隔的值不足以匹配transition-property屬性的值列表，那么用戶代理必須重復該分屬性的值列表，以使他的值列表足以匹配transition-property屬性的值列表。這些值的截斷或重復不會影響最終值的計算。注意：這類似于背景樣式的相關屬性，transition-property屬性類似于background-image屬性。

例3

div {
  transition-property: opacity, left, top, width;
  transition-duration: 2s, 1s;
}

上面的例子中定義了opacity屬性過渡的持續時間為2s；left屬性過渡的持續時間為1s；top屬性過渡的持續時間為2s；width屬性過渡的持續時間為1s。

注意：開發者可以利用過渡創建動態變化地內容，而動態變化地內容可能導致某些用戶的癲癇發作。

2.1. transition-property 屬性

值：none | <single-transition-property> #;

其中<single-transition-property> = all | <custom-ident>;

默認值：all

不可繼承

適用于：all elements, ::before and ::after pseudo elements。

none

表示沒用屬性會過渡

all

表示所有可動畫的屬性都會表現出過渡動畫。

如果transition-property的值列表中有標識符不是一個可識別的屬性名或者不是一個可動畫（animatable）的屬性，瀏覽器在具體實現時必須仍舊從transition-duration屬性， transition-delay屬性和 transition-timing-function屬性的值列表的第一項開始匹配。也就是說，不可識別的屬性名或不可動畫的屬性必須仍然占據他們在值列表項中的位置以參與值的匹配。

例4

div {
  transition-property: opacity, nothing, width;
  transition-duration: 2s, 3s, 4s;
}

這個例子中opacity屬性匹配到2s；nothing是不可識別的屬性名，仍然匹配到3s；width匹配到4s。

<single-transition-property>產生的<custom-ident>要排除關鍵字“none”，另外也要排除其他非法的關鍵字。也就是說，關鍵字“none”，“inherit”，“initial”是不允許出現在值列表中的，使用了上述關鍵字的值列表將是語法無效的（語法無效，即整個transition-property無效。無效后，瀏覽器用了默認值all。其他分屬性同理）。

對于關鍵字“all”或者簡寫速記屬性，瀏覽器在實現時必須給速記簡寫屬性的所有可動畫的分屬性添加過渡，匹配transition-duration，transition-delay，和 transition-timing-function參數時使用速記簡寫屬性匹配。

如果一個屬性在transition-property屬性中指定了多次（不管是用它自身的屬性名還是用“all”關鍵字，還是用包含它的簡寫屬性），那么使用其在transition-property值列表中最后一個位置匹配到的參數進行過渡。

注意：all關鍵字與簡寫速記屬性以相似的方式起作用，所以說，all關鍵字可以看做所有可動畫的屬性的簡寫形式。

2.2.transition-duration屬性

transition-duration屬性定義一次過渡所花費的時長（過渡時間）。

取值： <time> #

以s或ms為單位。

默認值：0s

不可繼承

適用于：all elements, ::before and ::after pseudo elements

這個屬性指定過渡從舊值變為新值所花費的時間。默認值是“0s”，表示

舊值立即變為新值，沒有動畫效果。如果是負值，則整個transition-duration無效，使用默認值。

2.3. transition-timing-function屬性

transition-timing-function屬性描述在過渡期間中間值如何計算。它允許在過渡期間改變過渡的速度，這些效應稱為緩動函數。不管那種情況，一個可提供平滑曲線的數學函數可以被使用。

Timing functions可以被指定為stepping function（步進函數）或者cubic Bézier curve（三次貝塞爾曲線）。指定的這個timing function把當前經過的過渡時間的百分數當做他的輸入值，輸出從開始值到結束值的百分比。至于如何使用這個輸出結果，參見interpolation rules。

Stepping function用一個數字（相當于總的步數或分成的區間數）把作用域（過渡時間）分成相同大小的區間。每經過一個區間，就向最終的目標狀態前進相等的一步。這個函數也可以指定輸出百分比的變化是發生在區間的起始點還是發生在區間的結束點(in other words, if 0% on the input percentage is the point of initial change，實在看不懂這句啥意思)。

我的理解：start表示區間結束點的狀態（關鍵幀）插入到區間開始點（值立即變為區間結束點對應的值）；end表示區間結束點的狀態（關鍵幀）出現在他原本應該出現的位置。所以start立即發生，end延遲一個區間的時間發生。

Step timing functions

一個三次貝塞爾曲線由4個控制點定義：P0，P1，P2，P3（如下圖）。P0和P3通常設置為（0,0）和（1,1）。transition-timing-function屬性可以用來指定點P1和P2的值。可以使用預設的關鍵字（后面內容中會列舉），或者也可以用cubic-bezier()函數。在cubic-bezier()函數中，P1和P2都用一個X值和一個Y值指定。

Bézier Timing Function Control Points

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(<number>, <number>, <number>, <number>)

默認值：ease

適用于：all elements, ::before and ::after pseudo elements

Timing functions可以用下面的值定義：

關鍵字：

ease

與ease-in-out有點類似，剛開始速度急劇增加，到接近中間點時速度開始降低，相當于cubic-bezier(0.25, 0.1, 0.25, 1)。

linear

從開始狀態勻速地過渡到最終狀態，相當于cubic-bezier(0, 0, 1, 1)。

ease-in

剛開始過渡速度很慢，然后逐步加速直到到達最終狀態，同時動畫立即停止相當于cubic-bezier(0.42, 0, 1, 1)。

ease-out

過渡動畫剛開始速度很快，然后逐步減速，直到過渡到最終狀態，相當于cubic-bezier(0, 0, 0.58, 1)。

ease-in-out

從開始到中間點類似于ease-in，從中間點到最終狀態類似于ease-out，相當于cubic-bezier(0.42, 0, 0.58, 1)。

step-start

相當于steps(1, start)。使用這個值時，元素立即從開始狀態跳轉到最終狀態，然后在最終狀態停留transition-duration設置的時間。

step-end

相當于steps(1, end)。使用這個值時，元素先在其初始狀態停留transition-duration設置的時間，然后再直接跳轉到最終狀態。

函數：

steps()

語法：steps(number_of_steps, direction)

numbers of steps必須是一個大于0的正整數，表示步數或等分的區間數。

direction可以取“start”或“end”中的一個，表示值的改變發生在區間中的哪一點。如果省略，則作為 “end”處理。

cubic-bezier()

語法：cubic-bezier(<number>, <number>, <number>, <number>)

指定一個三次貝塞爾曲線。前兩個值是點P1的橫坐標和縱坐標，后兩個值是點P2的橫坐標和縱坐標，（x1,y1, x2,y2）。橫坐標必須在[0, 1]區間內否則無效，縱坐標可以超出這個區間范圍。如果指定一個無效的三次貝塞爾曲線，則整個transition-timing-function屬性無效，瀏覽器使用默認值。

2.3.1.序列化timing function

使用在[CSSOM]中定義的常用的串行化模式序列化Timing function，另外還要加上以下要求：

l 序列化之前，ease, linear, ease-in, ease-out,和ease-in-out這些關鍵字值不轉換為等價的cubic-bezier()函數。
l 步進時間函數（Step timing functions），不管用的是steps()還是關鍵字step-start或step-end都按以下規則序列化：

如果值的改變發生在結束點（相當于steps()函數的第二個參數為end），按照steps(<integer>)序列化
否則的話按照steps(<integer>, start)序列化。

2.4. transition-delay屬性

transition-delay屬性定義了過渡什么時候開始。當一個過渡被應用時，通過該屬性可以指定該過渡開始之前所要等待的時間（也就是延遲時間）。如果值為0s，說明被指定了過渡效果的屬性的值改變時，過渡動畫馬上開始。否則的話，當被指定了過渡效果的屬性的值改變時，過渡動畫要延遲指定的時間后才開始。

如果transition-delay屬性的值為負值，過渡動畫會在被指定了過渡效果的屬性的值發生改變時立即開始。

transition-delay

可取值：<time> #，單位s或ms

適用于：all elements, ::before and ::after pseudo elements

默認值：0s

不可繼承。

例5 transition-delay為負值的情況 點這里看在線demo。

transition-delay為負值時，過渡的實現過程：

當transition-delay的絕對值大于等于transition-duration的值時，沒有過渡動畫效果。觸發過渡時，立即從開始狀態變為結束狀態。

當transition-delay的絕對值小于transition-duration的值時，有過渡動畫效果。觸發過渡時，瀏覽器認為過渡動畫已經經過了transition-delay的絕對值的時間，過渡實際上是花費了transition-duration - （-transition-delay）的時間從中間狀態逐漸變為結束狀態，具體看例5中transition-delay為-1s時的情形。

2.5.transition屬性

transition屬性是前面介紹的4個屬性的簡寫屬性。

可取值： <single-transition> #

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

也就是transition-property + transition-duration + transition-timing-finction + transition-delay，中間用空格分隔，省略的取分屬性的默認值。如果指定多個屬性的過渡效果，不同屬性值的過渡效果用逗號隔開。

默認值：參見前面的4個分屬性。

不可繼承。

適用于：all elements, ::before and ::after pseudo elements

在使用transition屬性指定可動畫屬性的過渡效果時，如果在值列表中存在代表transition-property屬性的值為none，則整個transition聲明將無效，瀏覽器轉而使用默認值all。

3. 過渡的開始

瀏覽器（implementations，下同）在實現過渡時必須維持一個正在進行中的過渡（running transitions）的集合，這些過渡被應用于特定的元素及其非簡寫的屬性。這些過渡都有各自的開始時刻（start time），結束時刻（end time），開始值（start value），結束值（end value），回動調整開始值（reversing-adjusted start value），和回動縮短系數（reversing shortening factor）。瀏覽器在實現過渡時按照該部分內容所描述的那樣給每一個過渡添加上述一些列的參數，以及當過度完成或要取消過渡時移除這一系列的參數。對于回動調整開始值（reversing-adjusted start value），和回動縮短系數（reversing shortening factor）。

瀏覽器當然也必須要維持一個已完成的過渡（completed transitions）的集合。就像running transitions一樣，completed transitions也被應用于特定的元素及其非簡寫的屬性。本規范聲明對于同一個元素以及同一個屬性而言，永遠不會同時存在一個running transition和一個completed transition。

如果一個元素不再存在于document中，瀏覽器必須移除應用在該元素上的所有running transitions，同時也必須從completed transitions的集合中將其移除。

為了在某些特定情況下阻止重復地過渡，一個completed transitions的集合需要被維持。本規范同時聲明不相關的樣式的改變不會觸發過渡。

例6 過渡效果的繼承

在這個例子中，一個可繼承的屬性被指定了過渡，completed transitions集合的維持是有必要的。父元素在一個屬性上指定了較長持續時間的過渡（如：transition: 4s text-indent;）同時子元素的這個屬性的值繼承自父元素，而且子元素在這個屬性上指定了較短持續時間的過渡（如：transition: 1s text-indent;）。

如果是后代元素的可繼承屬性設置了過渡，那么如果祖先元素該屬性的值發生了改變同樣會觸發后代元素上設置的過渡。

如果后代元素過渡的完成先于祖先元素的過渡，那么后代元素將會重新開始從他的父元素繼承相應的屬性值（繼續過渡）。這樣的效果可能不是預期想要的效果，但是對于開發者的要求來說這是必要的。（我測試的結果是，Firefox中是這種效果，Chrome中不是這種效果。Chrome中是先讓祖先元素到達最終狀態，后代元素的過渡才開始）。

 1 p{
 2     border:1px solid black;
 3     transition:4s text-indent;
 4 }
 5 p:hover{
 6     text-indent:50px;
 7 }
 8 quote{
 9     display:block;
10     transition:1s text-indent;
11 }
12 quote:hover{
13 text-indent:inherit;    
14 }
15 <p>
16     Maintain that unrelated style changes do not trigger transitions.
17     <quote>This set of completed transitions needs to be maintained。</quote>
18 </p>

具體效果點這里。

下面這段內容理解不了。

許多東西都能引起一個元素的屬性的計算值的改變，包括從文檔樹中移除和插入元素，改變文檔樹引起的選擇器匹配到的元素的改變，修改樣式表或者樣式屬性以及其他一些東西。本規范沒有定義什么時候更新計算值，除了說瀏覽器禁止使用，呈現或顯示來源于無計算值更新的CSS cascading、value computation和inheritance process （這意味著瀏覽器不可避免地會遇到把規范聲稱的無計算值變更的情形作為樣式變更的一部分處理）。然而，當瀏覽器為了反映這些改變而更新一個元素的屬性的計算值時，或者計算新添加進文檔中的元素的屬性的計算值時，瀏覽器必須同一時間更新所有元素以及所有屬性的計算值以反映這些變化（或者至少說雖然瀏覽器在不同時間更新了這些變化，但是讓用戶察覺不到這些更新不是同時發生的，而是讓用戶感覺到這些更新是同時發生的）。一組樣式同步更改的過程稱為樣式更改事件（style change event）。瀏覽器通常都有一個style change event與他們所要求的屏幕刷新率（screen refresh rate）相一致。同時，計算樣式或者布局信息的及時更新對于依賴于此的腳本API是必要的。

因為規范沒有規定style change event具體什么時候發生，所以只要是計算值的變更都被認為是同步發生的。開發者應該清楚，在計算值改變后，不同的瀏覽器對過渡屬性的值的更新時間存在差異，有的瀏覽器認為這些變更是同步的，而有些則不這么認為。

當一個style change event發生時，瀏覽器必須根據本次事件中計算值的變更開始實現過渡。如果在style change event發生期間或發生之前（previous style change event），有元素不在文檔中，那么對于本次style change event這個元素的過渡就不會開始。另外，定義before-change style作為previous style change event的元素的所有屬性的計算值（computed values），衍生自聲明式動畫（animations）的樣式除外，比如CSS Transitions, CSS Animations ([CSS3-ANIMATIONS]), and SMIL Animations ([SMIL-ANIMATION], [SVG11])，這些樣式的更新是實時更新的（updated to the current time）。同樣地，定義after-change style作為style change event開始時元素的所有屬性的計算值，但是源自CSS Transitions的計算樣式以及繼承自父元素的after-change style除外。

對于每一個有before-change style和after-change style的元素，并且對于該元素的每一個屬性（非簡寫屬性），定義matching transition-property value作為該元素after-change style中transition-property的最終值（當然是按照2.1小節的描述計算最終值）。與其相一致地，定義matching transition duration，matching transition delay，和matching transition timing function作為該元素在after-change style中transition-duration，transition-delay，和transition-timing-function的最終值。定義過渡的combined duration作為max(matching transition duration, 0s)和matching transition delay。對于每一個元素和屬性，瀏覽器必須按以下規則執行：

具體看規范：https://drafts.csswg.org/css-transitions/#matching-transition-duration

注意：當一個可動畫屬性的計算值（computed value）改變時，過渡根據transition-property，transition-duration，transition-timing-function和transition-delay屬性當前最新的計算值開始。也就是說當一個指定了過渡效果的屬性的值改變的同時，其對應的transition-*屬性也發生了改變，那么該屬性的過渡效果由當前最新的transition-*屬性的值控制。

這可以讓開發者分別給過渡的兩個不同狀態（前進：forward和回動：reverse）指定不同的transition-*屬性值。開發者可以在觸發過渡的同時給transition-property，transition-duration，transition-timing-function和transition-delay屬性指定另外的值。因為transition-*屬性的當前最新值控制過渡，所以這些觸發過渡后新指定transition-*的值將覆蓋觸發過渡前transition-*的值控制過渡。

上面兩段內容說的是一個意思。

例7

li {
  transition: background-color linear 1s;
  background: blue;
}
li:hover {
  background-color: green;
  transition-duration: 2s; /* applies to the transition *to* the :hover state */
}

上面例子中，列表項進入懸停狀態時背景顏色變為綠色，同時transition-duration的值變為2s，所以列表項的背景色從藍色過渡到綠色用了2s，而不是1s；當列表項從懸停狀態恢復到原來狀態時，transition-duration的值變為1s，所以背景色從綠色過渡到藍色用了1s而不是2s。

點我看demo

注意：

一旦一個屬性開始過渡（包括進入延遲期間），其過渡效果仍然基于原來的timing function，duration和delay，即使在過渡完成前transition-timing-function，transition-duration或者transition-delay屬性的值被修改（注意這里不是前文例子中的情形，前文例子中timing function，duration和delay是同步被修改的，這里是延遲修改）。見上面demo中的例8

但是，如果是transition-property的值被修改，那么原來指定了過渡效果的屬性的過渡會立即停止，其值會立即變為最終的值。見上面demo中的例9

注意：上述規則意味著聲明式動畫（declarative animation，與腳本式動畫（scripted animation）相反）引起的屬性計算值的改變不會觸發過渡。因為對于聲明式動畫來說，before-change style包含up-to-date style。

3.1. 快速回動過渡

對于過渡來說，在他完成之前插值改變屬性的值，就會重置過渡的開始值。比如當鼠標指針懸停在元素上時，元素的過渡效果開始，然后在過渡效果完成前鼠標指針從元素中退出。如果鼠標移出和移進的過渡使用的是原來指定的durations和timing functions，那么最終的過渡的效果將會是錯亂的，因為第二次過渡使用了完整的duration移動了一個縮短的距離。作為替代，規范聲明讓第二次過渡相應地也縮短。

上述規則中的機制用于導致reversing shortening factor和reversing-adjusted start value的回動過渡。特別是回動階段reversing shortening factor小于1的時候。

4.過渡事件

過渡的創建、開始、完成和取消會產生相應的DOM事件。對于指定了過渡效果的元素的屬性實際上是該屬性的分屬性觸發了過渡事件。比如通過border-width屬性指定元素邊框寬度從0px過渡到20px，那么border-top-width，border-right-width，border-bottom-width和border-left-width都觸發了過渡事件。前進階段可以觸發過渡事件，回動階段同樣也可以觸發過渡事件。

4.1. 過渡事件接口

4.1.1.過渡事件屬性

propertyName

只讀，字符串類型，返回與過渡綁定的CSS屬性名。

elapsedTime

只讀，浮點數，返回過渡觸發后已經運行的時間，包括延遲時間，單位s。

pseudoElement

只讀，字符串類型，返回發生過渡的CSS偽元素的名字（這種情況下，事件的目標target是與該偽元素相對應的元素）或者返回一個空字符串（也就是說發生過渡的元素不是偽元素）。

TransitionEvent(type, transitionEventInitDict)

是一個事件構造器，用給定的參數創建一個過渡事件。具體參見MDN。

4.2.過渡事件的類型

transitionrun

目前還沒有瀏覽器支持該事件。

當一個過渡被創建的時候觸發（或者說當過渡被添加到running transitions集合中時觸發）。

對于transitionrun，如果transition-delay值為負，則elapsedTime屬性返回值等于： min(max(-transition-delay, 0), transition-duration)。

transitionstart

目前只有IE10+支持該事件。

當過的延遲時間走完時觸發。

對于transitionstart，elapsedTime返回的值與transitionrun一樣。

transitionend

所有現代瀏覽器都支持該事件。

當過渡完成時觸發。如果在過渡完成之前該過渡被移除了，比如transition-property被移除，那么，不會觸發transitionend。

對于transitionend，elapsedTime返回的值等于transition-duration的值。

如果過渡延遲時間為負值，且絕對值大于等于過渡持續時間時，不會產生過渡效果，也不會觸發過渡事件

transitioncancel

目前還沒有瀏覽器支持該事件。

當過渡被取消時觸發。

對于transitioncancel，elapsedTime返回過渡延遲結束時刻到過渡被取消時刻的秒數。

如果transition-delay的值為負，過渡開始的時刻等于過渡真正觸發時刻之前transition-delay絕對值的秒數。

如果transition-delay的值為正，而且transitioncancel在過渡的延遲時間結束前觸發，那么其elapsedTime返回0。

過渡事件通過DOM的addEventListener() 方法添加。

點我查看demo。

參考資料和相關文章：

1、規范原文

2、深入理解CSS過渡transition

3、CSS3 Transition的唯一事件：TransitionEnd

4、MDN

總結

以上是生活随笔為你收集整理的CSS 3学习——transition 过渡的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。