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