我寫工業生產製造: CSS3 transition 轉場屬性的應用技巧：文字漸變顏色效果

CSS3 transition 轉場效果可以讓網頁中的元素展現一種漸漸改變的效果，什麼是漸漸改變的效果呢？就像是一個 DIV 區塊漸漸拉長或是滑鼠移到某一段文字，該段文字漸漸變成其他種顏色，沒錯，CSS3 transition 屬性可以做到這些效果，CSS 的確是越來越強大，以前必須要用 JavaScript 設計的效果，現在也可以直接讓 transition 屬性來設計，而且語法還相當簡單，效能又非常好，實際做幾個測試範例來執行，吃資源的程度也比 JavaScript 好一些，跑起來很順暢，看來 CSS3 的這個 transition 的確好用。

說了這麼多，還沒講到 transition 屬性要怎麼使用，使用 transition 之前要先知道它的幾個效果，分別是 property duration timing-function delay 這幾樣，寫在 transition 裡面的順序會是這樣，順序可千萬不能寫錯，否則跑起來會有問題唷！

transition: property duration timing-function delay;

順序比較沒什麼問題，重點在於這幾個效果分別代表什麼意思，首先 property 是用來設定要產生轉場效果的網頁元素屬性，例如 DIV 的寬度、高度、顏色 ... 這些，都是用 property 來設定，接著 duration 用來設定整個 transition 所發生的時間秒數，後面的 timing-function 是用來設定 transition 發生的速度曲線，最後的 delay 則用來控制延遲時間。

聽完基本的功能介紹，想必還是很難搞懂，我剛開始也是這樣，光這些功能就搞了好久，最簡單進入狀況的方式就是直接看範例，所以我也寫了一個簡單版的範例給各位參考。

這個是範例的效果，滑鼠移到範例文字上就看得到囉！

文字顏色的由藍色漸漸變成橘色的效果

有看到了嗎？這就是 CSS3 transition 轉場屬性的效果，應用在 DIV 的尺寸改變或顏色改變也會有很好的效果，不過全部要介紹似乎有點占篇幅，如果你對這樣的轉場功能很有興趣，可以看看 Wibibi 的介紹，範例比較多，也有 DIV 區塊的 transition 改變效果，自己研究看看。

Wibibi 關於轉場效果的介紹：CSS3 transition 屬性

PS. 本篇內容的範例也是從 Wibibi 的內容範例拿來修改的，改得有模有樣吧！？這篇轉場效果就先講到這邊，下次有什麼新鮮的網頁設計技巧再分享給各位讀者。