淺談 CSS3 Transition 轉場動畫效果

哇... CSS3 出現轉場效果了耶！也就是俗稱的動畫效果～讓您的滑入（ :hover ）不再是死板板的變化了！不過，還是請各位不要使用腦殘的 IE 來觀看喔！否則的話，是看不到 CSS3 Transition 的轉場動畫效果喔！以下幫各位整理一下瀏覽器的支援性～

IE6	IE7	IE8	IE9	Firefox	Opera	Google Chrome	Safari
X	X	X	X	O	O	O	O

以下提供幾個相關的網站，搜集了一些 CSS3 Transition 的轉場動畫效果應用，大家在觀看他們範例網頁的時候，可將游標滑入並滑出連結區域試試看，就會看到不同的轉場動畫效果喔！

http://webdesignledger.com/tutorials/13-pure-css-techniques-for-creating-javascript-like-interactions

http://tympanus.net/Tutorials/AnimatedButtons/index4.html

CSS2 與 CSS3 的滑入（ :hover ）比較：

如下圖，在傳統 CSS2 的表現之下，透過 CSS 的 background-color 屬性設定會看到紅色直接替換成藍色。

CSS3 Transition 的基本精神是在 CSS 屬性改變時自動生成中間的轉場動畫效果近似與補間動畫的意涵。若將 Transition 的作用時間設定成 1 秒鐘，則初始狀態為下圖左（ 0 秒）；滑入過程中的狀態為下圖中（ 0.5 秒）；滑入後的呈現狀態為下圖右（ 1 秒 ）。  Demo

CSS3 Transition 的屬性使用

屬性	說明
transition	此寫法為縮寫可分別放入 transition 的四項屬性。
transition-property	指定 transition 效果所要控制的屬性。
transition-duration	指定多少時間完成 transition 效果。
transition-timing-function	指定 transition 的速度效果。
transition-delay	指定 transition 效果的開始時間。

總結：

CSS3 可以用來做簡單的動畫效果，效能還比用 jQuery 好，適合用在 Mobile Web 行動裝置網站的開發上。再加上 IOS 與 Android 的瀏覽器都支援 CSS3 ，所以，並不需要去擔心支援度的問題。 故使用 CSS3 是未來的趨勢，正在看這篇文章的大大們是否要及早準備呢？以下課程連結可讓各位當做學習與進修的參考～