使用CSS3過(guò)渡：完全指南
如果您已經(jīng)閱讀了***的 CSS 相關(guān)技術(shù)和技巧，那么毫無(wú)疑問(wèn)，您可能已經(jīng)讀過(guò)一些涉及 CSS3 過(guò)渡主題的文章、博客文章和教程，這有助于您在一定期限內(nèi)順利實(shí)現(xiàn) CSS3 的價(jià)值。介紹 CSS3 過(guò)渡 的 W3C 規(guī)范的模塊現(xiàn)已接近候選推薦狀態(tài)，這意味著該項(xiàng) CSS3 技術(shù)現(xiàn)已成為許多現(xiàn)代 CSS 開(kāi)發(fā)人員工具箱中的主要技術(shù)。
本文將深入介紹 CSS3 過(guò)渡。 希望您在讀過(guò)這篇文章之后，能夠?qū)?CSS3 過(guò)渡具有更加全面的理解，同時(shí)還提供了一些實(shí)用技巧和技術(shù)，幫助您在新項(xiàng)目中實(shí)現(xiàn)此功能。
過(guò)渡語(yǔ)法
過(guò)渡語(yǔ)法通常以簡(jiǎn)化形式表達(dá)，出于簡(jiǎn)潔性和便于維護(hù)，強(qiáng)烈建議這樣做。 我稍后會(huì)在本節(jié)中對(duì)此進(jìn)行詳細(xì)說(shuō)明，但現(xiàn)在，我要介紹一個(gè)采用普通書(shū)寫(xiě)符號(hào)的簡(jiǎn)單過(guò)渡示例：
- .example {
- transition-property: background-color;
- transition-duration: 2s;
- transition-timing-function: ease-in;
- transition-delay: 1s;
- }
注意，為簡(jiǎn)潔起見(jiàn)，本文展示的所有代碼示例均未提供供應(yīng)商前綴。 使用代碼時(shí)，請(qǐng)務(wù)必確保在使用過(guò)渡的情況下納入所有必要的前綴，并始終在末尾提供不帶前綴的標(biāo)準(zhǔn)規(guī)則。
下面是上述示例的分解結(jié)構(gòu)。
transition-property
transition-property 行定義要過(guò)渡或動(dòng)態(tài)模擬的 CSS 屬性。 此屬性的值可以是要?jiǎng)討B(tài)模擬的任意屬性，只要是 動(dòng)畫(huà)屬性 即可。 默認(rèn)值為 none，這意味著不存在屬性過(guò)渡； 同樣，如果您將值指定為 all，則所有動(dòng)畫(huà)屬性均將應(yīng)用于元素過(guò)渡。
transition-duration
transition-duration 屬性指定完成過(guò)渡所需的時(shí)間。 也就是說(shuō)，從過(guò)渡開(kāi)始到結(jié)束的持續(xù)時(shí)間。 當(dāng)元素過(guò)渡返回原始狀態(tài)后，將重復(fù)顯示過(guò)渡。 您可以用秒 (數(shù)字后緊跟單位 "s") 或者毫秒 ("ms")為單位指定持續(xù)時(shí)間。 默認(rèn)值為 0s。
transition-timing-function
transition-timing-function 屬性指定某種指代過(guò)渡 "緩動(dòng)函數(shù)" 的屬性。 此屬性可指定瀏覽器的過(guò)渡速度，以及過(guò)渡期間的操作進(jìn)展情況。 您可以將某個(gè)值指定為預(yù)定義函數(shù)、階梯函數(shù)或三次貝塞爾曲線。 默認(rèn)值為 ease。 其他預(yù)定義值包括 linear, ease-in, ease-out, 和 ease-in-out。 有關(guān)階梯函數(shù)和貝塞爾曲線的更多信息，請(qǐng)參閱 transition-timing-function 屬性規(guī)范。在大部分情況下，定時(shí)函數(shù)很難區(qū)分彼此，除非過(guò)渡持續(xù)時(shí)間超過(guò)一秒或兩秒。
transition-delay
屬性指定過(guò)渡開(kāi)始前出現(xiàn)的延遲。 也就是說(shuō)，在觸發(fā)過(guò)渡后，延遲代表發(fā)生任何過(guò)渡前流逝的時(shí)間。 您可以指定秒數(shù)或毫秒數(shù)。 負(fù)值同樣有效，因?yàn)檫@可能導(dǎo)致中途開(kāi)始進(jìn)行過(guò)渡（有效扭轉(zhuǎn)了延遲）。
過(guò)渡簡(jiǎn)寫(xiě)
如上所述，您可以將所有這些屬性指定為單一速記聲明的一部分。 因此，您可以將上面的示例表達(dá)如下：
- .example {
- transition: background-color 2s ease-in 1s;
- }
時(shí)間相關(guān)值的順序至關(guān)重要。 ***個(gè)時(shí)間值始終代表持續(xù)時(shí)間，因此如果您希望納入延遲，則必須首先定義持續(xù)時(shí)間。
多項(xiàng)過(guò)渡
您可以使用上面討論的 transition-property 普通書(shū)寫(xiě)語(yǔ)法，用逗號(hào)分隔要過(guò)渡的各個(gè)屬性，從而聲明多項(xiàng)過(guò)渡。 反過(guò)來(lái)，其他普通書(shū)寫(xiě)值允許包含逗號(hào)分隔值，使其對(duì)應(yīng)于 transition-property 值。
然而，簡(jiǎn)寫(xiě)語(yǔ)法進(jìn)一步簡(jiǎn)化了此操作，能夠同時(shí)聲明多項(xiàng)屬性過(guò)渡。 為此，您只需用逗號(hào)分隔聲明，如下所示：
- .example {
- transition: background-color 2s ease-in 1s,
- width 2s ease-in-out,
- height 3s ease-out;
- }
如果您愿意，可以在一行上顯示多個(gè)屬性，或者為提高可讀性將各過(guò)渡聲明各占一行，如上面的示例所示。
觸發(fā)過(guò)渡
既然您已經(jīng)很好地掌握了 CSS3 過(guò)渡語(yǔ)法，那么應(yīng)當(dāng)如何實(shí)際觸發(fā)過(guò)渡呢？ 上面所述的示例定義了過(guò)渡操作的各個(gè)層面，但卻并沒(méi)有指定觸發(fā)過(guò)渡的時(shí)間和方法。 因此，就目前的狀況而言，單純通過(guò)代碼不會(huì)觸發(fā)任何操作。
開(kāi)發(fā)人員最常用的過(guò)渡觸發(fā)方法是使用 :hover 偽類。 因此， 加上 :hover 觸發(fā)器后，代碼可能如下所示：
- .example {
- background-color: green;
- transition: background-color 2s ease-in 1s;
- }
- .example:hover {
- background-color: blue
- }
有了這個(gè)代碼，如果用戶將鼠標(biāo)懸停在該元素之上，背景顏色會(huì)在經(jīng)過(guò)一秒鐘的初始延遲后，于兩秒鐘內(nèi)動(dòng)態(tài)地從綠色變?yōu)樗{(lán)色。
:hover 觸發(fā)器以外的事件觸發(fā)的過(guò)渡
事實(shí)上，觸發(fā)過(guò)渡與觸發(fā)器 (在上述情況下，觸發(fā)器為 :hover)本身沒(méi)有太大關(guān)系。 實(shí)際觸發(fā)過(guò)渡的是元素狀態(tài)變化。
在上面的示例中，狀態(tài)變化是指從綠色背景顏色變?yōu)樗{(lán)色背景顏色。 湊巧的是，狀態(tài)變化作為:hover 事件的結(jié)果發(fā)生。
為說(shuō)明這與觸發(fā)過(guò)渡的實(shí)際事件毫無(wú)關(guān)聯(lián)，也為強(qiáng)調(diào)狀態(tài)變化的重要性，下面提供了一些觸發(fā)過(guò)渡的其他方法。
使用 :active
:active 偽類表示用戶單擊某個(gè)元素并按住鼠標(biāo)按鈕時(shí)顯示的狀態(tài)。該代碼如下所示：
- .example {
- width: 200px;
- height: 200px;
- transition: width 2s ease-in;
- }
- .example:active {
- width: 400px;
- }
在這個(gè)示例中，當(dāng)用戶單擊并按住元素時(shí)，發(fā)生寬度屬性過(guò)渡，因此該元素保持 "活動(dòng)" 狀態(tài)。
使用 :focus
:focus 偽類通常會(huì)在元素接收鍵盤(pán)關(guān)注時(shí)出現(xiàn)。該代碼如下所示：
- input {
- width: 200px;
- transition: width 2s ease-in;
- }
- input:focus {
- width: 250px;
- }
在這種情況下，窗體輸入元素上將會(huì)發(fā)生過(guò)渡，且該字段接收關(guān)注時(shí)會(huì)執(zhí)行窗體輸入元素寬度過(guò)渡
此處作為一個(gè)邊點(diǎn)，如有可能，當(dāng)對(duì) :hover 偽類應(yīng)用過(guò)渡時(shí)，***將 :focus 添加至您的選擇器堆棧。 這樣，將能夠豐富鼠標(biāo)用戶和鍵盤(pán)用戶的體驗(yàn)。
使用 :checked
:checked 偽類。 為在發(fā)生這種狀況時(shí)觸發(fā)過(guò)渡，您需要執(zhí)行以下代碼：
- input[type="checkbox"] {
- transition: width 1s ease;
- }
- input[type="checkbox"]:checked {
- width: 30px;
- }
在這種情況下，雖然寬度變化不會(huì)實(shí)際為復(fù)選框本身帶來(lái)任何可見(jiàn)差別，但仍會(huì)顯得凹陷，因?yàn)榇绑w字段所占的空間將增大。
使用媒體查詢
觸發(fā)元素狀態(tài)變化的另一種方法是使用 CSS3 媒體查詢。 如果您學(xué)習(xí)過(guò)媒體查詢，那么一定知道它能夠讓您根據(jù)某些元素(比如設(shè)備寬度和方向)更改應(yīng)用于元素的樣式。 媒體查詢過(guò)渡可能如下所示：
- .example {
- width: 200px;
- height: 200px;
- transition: width 2s ease, height 2s ease;
- }
- @media only screen and (max-width : 960px) {
- .example {
- width: 100px;
- height: 100px;
- }
- }
在這個(gè)示例中，該元素的寬度和高度為 200px × 200px。 但是，如果用戶將自己的窗口大小調(diào)整到 960px 或以下，則元素將過(guò)渡為更小的尺寸： 100px × 100px。 當(dāng)窗口超過(guò) 960px 的閾值后，將會(huì)發(fā)生過(guò)渡。
當(dāng)然，如果網(wǎng)頁(yè)加載時(shí)用戶的窗口大小是 960px 或以下，瀏覽器會(huì)在該部分應(yīng)用這些樣式，但是由于不會(huì)出現(xiàn)狀態(tài)變化，因此不會(huì)發(fā)生過(guò)渡。
正如您在上面的示例中所見(jiàn)，您基本上可以通過(guò)在某種程度上更改元素 CSS 的任何事件觸發(fā)過(guò)渡。 因此，只要更改的屬性是動(dòng)畫(huà)屬性，就會(huì)發(fā)生過(guò)渡。
通過(guò) JavaScript 觸發(fā)的過(guò)渡
在這一點(diǎn)上，您可能已經(jīng)理解： 如果您可以通過(guò)基于 CSS 的狀態(tài)更改觸發(fā)過(guò)渡，那么自然可以通過(guò) JavaScript 做到這一點(diǎn)。
在下面的示例中，當(dāng)使用純粹的 CSS 示例時(shí)同樣也會(huì)發(fā)生過(guò)渡，也就是說(shuō)，它是 CSS 狀態(tài)變化的結(jié)果，但是，這一次是通過(guò) JavaScript 觸發(fā)的過(guò)渡。
下面的示例使用簡(jiǎn)單的 jQuery 腳本切換元素類名稱：
- $(function() {
- $("#button").click(function() {
- $(".box").toggleClass("style-change");
- });
- });
假設(shè)您的標(biāo)記中具有包含 box 類的元素和 button 元素 ID，則每次用戶單擊 #button 元素時(shí)，此腳本都會(huì)將 style-change 類切換為 box。
盡管其本身沒(méi)有任何作用。 您可以向 style-change 類添加過(guò)渡，這樣，每次添加或刪除類時(shí)，在兩個(gè)聲明塊中指定的值之間來(lái)回進(jìn)行寬度和高度 過(guò)渡，如下所示：
- .box {
- width: 200px;
- height: 200px;
- transition: width 2s ease, height 2s ease;
- }
- .style-change {
- width: 300px;
- height: 300px;
- }
同樣，此代碼段重點(diǎn)強(qiáng)調(diào)樣式發(fā)生變化導(dǎo)致過(guò)渡的點(diǎn)，您可以通過(guò)任意數(shù)量的方法觸發(fā)這些更改，包括通過(guò) JavaScript.
這是在考慮是否要使用 CSS 過(guò)渡替換 JavaScript 時(shí)需要牢記的重要一點(diǎn)。 我發(fā)現(xiàn)一條需要牢記的有效規(guī)則，即事件通常應(yīng)當(dāng)通過(guò) JavaScript 觸發(fā)，簡(jiǎn)單動(dòng)畫(huà)或過(guò)渡則應(yīng)使用 CSS 觸發(fā)。 當(dāng)然，這只是一般性的指導(dǎo)原則，不一定是***選擇，具體應(yīng)視條件而定。
過(guò)渡技巧和技術(shù)
現(xiàn)在，您已經(jīng)對(duì)過(guò)渡語(yǔ)法及其使用方式有了很好的掌握，我將會(huì)介紹幾項(xiàng)小技巧，您或許會(huì)在某個(gè)項(xiàng)目中派上用場(chǎng)。
開(kāi)關(guān)狀態(tài)的不同過(guò)渡方式
此刻，在測(cè)試完某些示例后，您可能已經(jīng)注意到，過(guò)渡時(shí)通常會(huì)進(jìn)入"開(kāi)啟" 狀態(tài)，并且隨后會(huì)回到最初的 "關(guān)閉" 狀態(tài)。 但是，還有一種方式定義其他開(kāi)關(guān)狀態(tài)過(guò)渡方式。
在下面的代碼示例中，開(kāi)關(guān)狀態(tài)均會(huì)導(dǎo)致背景顏色的過(guò)渡：
- .example {
- width: 100px;
- height: 100px;
- background-color: blue;
- transition: background-color 2s linear;
- }
- .example:hover {
- background-color: green;
- }
讓我們來(lái)改一下關(guān)閉狀態(tài)的持續(xù)時(shí)間和計(jì)時(shí)函數(shù)，如下所示：
- .example {
- width: 100px;
- height: 100px;
- background-color: blue;
- transition: background-color 1s ease-out;
- }
- .example:hover {
- background-color: green;
- transition: background-color 2s linear;
- }
在這段代碼中，我將最初的過(guò)渡聲明轉(zhuǎn)為 :hover 狀態(tài)，并在觸發(fā) :hover前向元素應(yīng)用的樣式添加了一行新代碼。 現(xiàn)在，"開(kāi)啟" 過(guò)渡需要兩秒鐘 （指定為 2s linear）， and the "關(guān)閉" 過(guò)渡需要一秒鐘 （指定為 1s ease-out）。
這個(gè)想法的關(guān)鍵在于，指定瀏覽器當(dāng)元素過(guò)渡從綠色變?yōu)樗{(lán)色時(shí)，使用 1s ease-out進(jìn)行元素過(guò)渡，但當(dāng)元素過(guò)渡從藍(lán)色變?yōu)榫G色時(shí)，則使用 2s linear進(jìn)行元素過(guò)渡。
這可能有助于提高各種 UI 元素的可用性。 例如，如果過(guò)渡時(shí)間超過(guò)三秒或四秒（有點(diǎn)冗長(zhǎng)）， 您可以在更短的時(shí)間內(nèi)使元素返回正常的 "關(guān)閉" 狀態(tài)。
您還可以查閱我的個(gè)人網(wǎng)站文章，名為 Mimic 'onmouseout' with CSS3 Transitions，其中討論了此概念。
幾乎無(wú)限延遲
另一項(xiàng)有關(guān)過(guò)渡的技巧是使用無(wú)限延遲模擬***狀態(tài)更改，并且無(wú)需使用 JavaScript。
該代碼如下所示：
- .example {
- width: 100px;
- height: 100px;
- background-color: blue;
- transition: width 0s ease-out 999999s,
- height 0s ease-out 999999s;
- }
- .example:active {
- width: 200px;
- height: 200px;
- transition: width 2s,
- height 2s;
- }
在此案例中， 我使用 :active 狀態(tài)更改元素的寬度和高度。 開(kāi)啟狀態(tài)的過(guò)渡持續(xù)時(shí)間為 2 秒鐘。然而，該元素過(guò)渡回到原始尺寸 (100×100) 出現(xiàn)的延遲持續(xù)時(shí)間為 999999s 和 0s。 但是，其持續(xù)時(shí)間無(wú)關(guān)緊要，因?yàn)榛旧暇W(wǎng)頁(yè)時(shí)間延遲無(wú)上限，相當(dāng)于 12 天！
這意味著關(guān)閉狀態(tài) （或者觸發(fā) :active 狀態(tài)前的原始元素狀態(tài)） 永遠(yuǎn)不會(huì)出現(xiàn)，除非用戶等待長(zhǎng)達(dá) 12 天。因此，結(jié)果是 :active 狀態(tài)變?yōu)?**性狀態(tài)，從而使人產(chǎn)生 JavaScript 改變?cè)貥邮降腻e(cuò)覺(jué)。
Joel Besada 在他的博客文章 Maintaining CSS Style States using “Infinite” Transition Delays中對(duì)此項(xiàng)技術(shù)進(jìn)行了介紹。
通過(guò)硬件加速使過(guò)渡更加流暢
有時(shí)，基于 CSS 的動(dòng)畫(huà)并沒(méi)有您所期待的那樣流暢。 有時(shí)，動(dòng)畫(huà)元素會(huì)在播放動(dòng)畫(huà)后留下 "痕跡" 。 這通常是一個(gè) WebKit 問(wèn)題，在基于 iOS 的設(shè)備上尤為引人注目。 您可以通過(guò)支持硬件加速來(lái)提高 WebKit 的過(guò)渡性能。 下面是一個(gè)采用 -webkit- 前綴的簡(jiǎn)單過(guò)渡：
- .example {
- width: 200px;
- height: 200px;
- -webkit-transition: width 2s ease,
- height 2s ease;
- }
- .example:hover {
- width: 300px;
- height: 300px;
- }
此示例將該元素的寬度和高度從 200×200 過(guò)渡到 300×300。 在 Chrome 瀏覽中，這將會(huì)導(dǎo)致滯后痕跡，如圖 1 所示。
圖 1. 過(guò)渡期間 Chrome 中的滯后痕跡
為解決此問(wèn)題，您必須通過(guò)添加一行 CSS 代碼來(lái)啟用硬件加速。 下面顯示了更正后的代碼：
- .example {
- width: 200px;
- height: 200px;
- -webkit-transition: width 2s ease,
- height 2s ease;
- -webkit-transform: translateZ(0);
- }
- .example:hover {
- width: 300px;
- height: 300px;
- }
新代碼行向 transform 屬性添加了 translateZ() 函數(shù)。 該函數(shù)本身通常用于 "轉(zhuǎn)換" 或定位 Z 軸（在 3D 空間中）上的元素，但零值會(huì)妨礙任何實(shí)際重新定位。 此函數(shù)的好處在于帶有硬件加速的元素過(guò)渡，它能夠簡(jiǎn)化過(guò)渡并消除痕跡或條紋，但零值不會(huì)重新定位該元素。
當(dāng)您發(fā)現(xiàn)過(guò)渡導(dǎo)致元素在開(kāi)始進(jìn)行動(dòng)態(tài)模擬之前便閃爍或閃光，該函數(shù)也能派上用場(chǎng)。 有關(guān)硬件加速的更多信息，請(qǐng)參閱 HTML5 Rocks 網(wǎng)站上 Improving the Performance of Your HTML***pp 一文的 Visual Fidelity++with HTML5: Hardware Acceleration 部分。
瀏覽器支持和供應(yīng)商前綴
就整體而言，CSS3 過(guò)渡的瀏覽器支持十分不錯(cuò)。 所有瀏覽器現(xiàn)均支持帶有前綴或不帶前綴的過(guò)渡。 未來(lái)的瀏覽器（Internet Explorer 10、Firefox 16 和 Opera 12.5）均支持不帶前綴的過(guò)渡，而舊版瀏覽器（比如 Chrome 和 Safari）則支持采用其各自供應(yīng)商前綴的過(guò)渡。 唯數(shù)不多得到大量使用但不支持過(guò)渡的瀏覽器是 Internet Explorer 6 至 9 和 Firefox 3.6。 有關(guān)支持和前綴使用的詳細(xì)分析，請(qǐng)參閱以下參考信息：何時(shí) 可以使用... 桌面和移動(dòng)瀏覽器中支持的 HTML5、CSS3 和 SVG 等兼容性列表。
下一步閱讀方向
希望本文對(duì)您理解 CSS3 過(guò)渡及語(yǔ)法細(xì)節(jié)有所幫助，也希望它提供的技巧和技術(shù)對(duì)您有所幫助。
有關(guān) CSS3 過(guò)渡的更多讀物，請(qǐng)查看以下任一資源：
