CSS3 transition 屬性

CSS3 transition 屬性是一種 CSS3 的轉場效果，網頁設計師可以透過 CSS3 transition 屬性的效果來調整網頁元素變化的特效，例如 DIV 區塊尺寸改變的效果、網頁文字變色的緩慢效果，只要利用 CSS3 transition 屬性值的秒數設定，就可以輕易的創造出慢動作（Slow Motion）的感覺。不過 CSS3 的 transition 屬性在較舊版的瀏覽器並不支援，待會兒會有一個瀏覽器對 CSS3 transition 屬性支援情況的整理給各位參考，先來看這個 transition 屬性的語法規則以及參數所代表的意思有哪些。

CSS3 transition 屬性基本語法
transition: property duration timing-function delay;
其實 CSS3 transition 是一個整合式的語法，包含了 property duration timing-function delay 等四個屬性值的效果，此種語法概念與 CSS 的 border 邊框設計語法有所雷同，CSS3 的 transition 屬性值也可以分別獨立出來設計，這幾個屬性值的代表意義如下：
語法說明
transition-property
用來定義可以產生 transition 屬性效果的屬性名稱，例如寬度、背景顏色 ...。
transition-duration
用來定義 transition 屬性發生的時間，單位為秒。
transition-timing-function
用來定義 transition 效果的發生速度，可說是設定轉場時所依據的貝茲曲線。
transition-delay
用來定義多久之後開始發生 transition 效果。
➤將此四個屬性效果分開設定可以設計出非常細膩的動畫效果，若是單純的簡單動化，例如背景顏色的漸漸變化或是 DIV 區塊的簡易變形，就可以直接使用 transition 將各個屬性值表現出來。

各瀏覽器對 CSS3 transition 屬性的支援

由於 transition 屬性是個蠻新的 CSS3 功能，並不是所有的瀏覽器版本都支援，舊版的瀏覽器全部都不支援，各大主流的瀏覽器現在的最新版本都支援 transition 屬性的效果，以下為支援程度的整理，請多多參考。
  • Chrome 26.0 及以上版本開始支援，語法請使用 -webkit- 開頭
  • FireFox 16.0 及以上版本開始支援，語法請使用 -moz- 開頭
  • Safari 6.1 及以上版本開始支援，語法請使用 -webkit- 開頭
  • Opera 12.1 及以上版本開始支援，語法請使用 -o- 開頭
  • IE 10.0 及以上版本開始支援
若您的目標使用族群會使用的瀏覽器在這些版本之上，支援度沒有問題的情況下，使用 transition 來設計特效就非常便利，以下我們準備了兩個不錯的簡單範例，變更 DIV 區塊的尺寸以及變更文字顏色的變化時間，程式碼都相當簡單。

CSS3 transition 屬性範例一、變更 DIV 區塊的大小
<style type="text/css">
#Change1{
    width:60px;
    height:60px;
    background:blue;
    transition:width 5s;
    -webkit-transition:width 5s;
    -moz-transition:width 5s;
    -o-transition:width 5s;
}
#Change2{
    width:60px;
    height:60px;
    background:yellow;
    transition:width 3s;
    -moz-transition:width 3s;
    -webkit-transition:width 3s;
    -o-transition:width 3s;
}
#Change3{
    width:60px;
    height:60px;
    background:red;
    transition:width 1s;
    -moz-transition:width 1s;
    -webkit-transition:width 1s;
    -o-transition:width 1s;
}
#Change1:hover,#Change2:hover,#Change3:hover{
    width:500px;
}
</style>
<div id="Change1"></div>
<div id="Change2"></div>
<div id="Change3"></div>
呈現效果（請將滑鼠放到區塊上）
範例一共準備了三個不同顏色的 DIV 區塊，他們都用上了 CSS3 transition 來修改尺寸，各位讀者可以看到，這三個 DIV 區塊除了在顏色上的差異外，transition 的尺寸變化速度也有所差異，例如第一個區塊中的語法「transition:width 5s;」，意思是區塊的寬度（width）可以改變，而變化的總時間為 5 秒（5s），相較黃色區塊 3 秒以及紅色區塊的 1 秒，藍色區塊顯然變化得比較慢，因為每個 DIV 區塊一開始的寬度都僅有 60px，但是藍色區塊延長為 500px 所花的時間最長，所以速度最慢，紅色區塊所用的時間最短，所以速度最快。

範例一最重要的關鍵地方在「transition:width 秒數;」的這段語法，宣告 DIV 區塊的 transition 屬性會影響的僅有寬度（width），根據所設定的秒數而變化。如果要把 CSS3 transition 的效果用在網頁文字上又該怎麼寫呢？範例二將提供參考。

CSS3 transition 屬性範例二、文字顏色的變換
<style type="text/css">
#TestString{
    font-size:25px;
    font-weight:bold;
    color:#003399;
}
#TestString:hover{
    color:#00DB00;
    transition:color 3s;
    -moz-transition:color 3s;
    -webkit-transition:color 3s;
    -o-transition:color 3s;    
}
</style>
<span id="TestString">測試文字顏色的漸漸變色效果</span>
呈現效果（請將滑鼠放到範例文字上）
測試文字顏色的漸漸變色效果
我們先準備一段文字並且用 span 標籤包起來，透過 id 把 CSS 的效果套用到文字中，這裡先將文字預設為顏色藍色（color:#003399），這裡使用到的是 color（文字顏色）、font-size（文字大小）與 font-weight（文字粗細）等效果，接著設定當滑鼠移到文字上的特效，也就是 CSS 的 hover 屬性內，先把顏色設為墨綠色（color:#00DB00;），再套用「transition:color 3s;」，修改文字顏色的轉場效果，總執行時間總共 3 秒，我們可以從範例呈現的效果看到，當滑鼠移到文字上 3 秒鐘的時間，文字就從藍色漸漸變成墨綠色囉！

➤部分傳統網意設計需要用到 JavaScript 的效果，若在網友的瀏覽器有支援 CSS3 animation 動畫屬性的情況下，可以直接使用 CSS3 的 transition 屬性來處理，省去設計師額外寫 JavaScript 特效的時間成本。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012