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