CSS3轉場效果(transitions)
在CSS3之前的轉場特效，都是立即完成的，轉場特效提供了更為豐富的動畫效果，以下為本章用來說明的一個簡單範例:
.box {
background: #2db34a;
border-radius: 6px;
height: 95px;
width: 95px;
}
.box:hover {
background: #ff2956;
}
下面是我們的第一個範例，左邊的是用上面的定義的方形，右邊的有另外加一行transition: 1s;的定義，它會在滑鼠游標在上面時，出現轉場效果，滑鼠游標移開後會回復原來的屬性，你可以比對看看兩者的不同。
See the Pen by eyesofkids (@eyesofkids) on CodePen.
轉場特效使用四個CSS屬性來進行定義，這些屬性可以整個合併到一個transition屬性之中:
transition-property: 定義哪些CSS屬性會被轉場效果影響。除了這些被指定的屬性，其他的轉場一如以往的會在瞬間完成。要特別注意的是，並非所有的CSS屬性都可以進行轉場，可用的屬性所有清單在這份資料與可進行動畫屬性，其中也包含了SVG的屬性。如果這個屬性定義為
transform，代表任何使用了transform的屬性都會被偵測來進行動畫。如果這個屬性定義為all，就會自動偵測所有可進行動畫的屬性，包含transform影響的屬性。預設值就是all。transition-duration: 定義轉場的持續時間。可以只定義一個時間給所有屬性使用，也可以分別給定不同時間。時間通常以
s為單位(秒)，可以定義小數點例如0.5s或.5s，預設值是0s。transition-timing-function: 時間函式，這是用來設定轉場過程時所使用的貝茲曲線。內建的幾個可直接使用數值如下，直接使用名稱就可以取用。在這個頁面中看到所有的預設值的範例:
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- step-start
- step-end
- steps()
- cubic-bezier()
其中cubic-bezier()的數值，可以到cubic-bezier.com來自訂所需要的貝茲曲線參數值，或是到這一頁Easing函數或CSS EASING ANIMATION TOOL的裡面挑選你想要的Easing函數，使用四個數字值可以產生一個貝茲曲線。預設值是ease。
- transition-delay: 定義多久之後開始發生轉場，這是一個延遲開始的時間。時間通常以
s為單位(秒)，可以定義小數點例如0.5s或.5s，預設值是0s。
transition屬性的合併寫法是按照上面的順序依次寫成一整行，所以如果都是以預設值來寫CSS定義的話，可以用非常簡單的寫法像這樣:
transition: .5s;
相當於下面這樣，第1、3、4值都是使用預設值。而.5s代表的是持續期間(duration)，而且因為最後面的那個延遲開始(delay)的預設值是0s，一般都不寫:
transition: all .5s ease;
註: 雖然你可以用
ms(微秒，千分之一秒)為單位來設定持續與延遲開始時間，但似乎不必要，因為太短暫的時間差人眼無法感覺差異。順序口訣: 屬性的順序的口訣，例如"屬持茲遲"(手持支援)或"屬續貝延"(手續被延期)
你也可以為每個不同的CSS屬性分別設定轉場的動畫定義:
.box {
background: #2db34a;
border-radius: 6px;
height: 95px;
width: 95px;
-webkit-transition: background .2s linear, border-radius 1s ease-in 1s;
transition: background .2s linear, border-radius 1s ease-in 1s;
}
.box:hover {
background: #ff2956;
border-radius: 50%;
}
以下為這個範例的執行結果，你可以把滑鼠游標放在上面久一點，因為第二個屬性(圓角邊)會在1s後才延遲開始。
See the Pen by eyesofkids (@eyesofkids) on CodePen.
轉場特效的概念十分簡單，開始狀態、結束狀態，以及持續時間、轉場使用的貝茲曲線函式。對滑鼠滑入(hover)來說，.box是開始狀態，而.box:hover是結束狀態。但當滑鼠游標離開時，就會兩個顛倒過來。那到底transition該加在.box中還是.box:hover中？大部份的情況是只需要加在.box中，除非你希望滑鼠游標移入與離開是兩種不同的轉場特效情況，不過你需要把所有的屬性都對應好，不然會產生立即執行的失效情況。如果你只加在:hover中大概是錯誤的寫法。以下為範例:
See the Pen by eyesofkids (@eyesofkids) on CodePen.
供應商前綴字(Vendor Prefixes)
供應商前綴字的出現是由於瀏覽器不同品牌的廠商，搶先於標準完成前就開始發佈已包含實作功能造成的結果。因為這些CSS屬性有可能在瀏覽器中有可能是屬於實驗性質的，所以在前面加上了瀏覽器供應商的前綴字，代表是要開啟這個實驗性的CSS屬性，到後來變成一個要為了相容不同瀏覽器的特殊寫法。而且，這不只是針對CSS3動畫相關的屬性，在一些新式的屬性，例如陰影或漸層，都有需要使用供應商前綴字的情況。由於瀏覽器新版本都自動偵測支援，現在這個問題會比較少見了。
不過，要記住哪一些屬性是需要加供應商前綴字，哪一些則不用，這是件非常令人頭痛的事情。一般都會使用一種叫Autoprefixer(自動前綴字產生器)的工具來幫忙轉換，例如下面的工具:
- 各種編輯器中的Autoprefixer外掛功能
- Autoprefixer CSS online線上轉換工具
- Pleeease線上轉換工具
現在一般來說只需要加上-webkit-前綴字即可，例如以下的範例:
-webkit-transition: background .2s linear, border-radius 1s ease-in 1s;
transition: background .2s linear, border-radius 1s ease-in 1s;