淺談 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

CSS 語法 - 網頁設計  - 淺談 CSS3 Transition 轉場動畫效果 - 031

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

CSS 語法 - 網頁設計  - 淺談 CSS3 Transition 轉場動畫效果 - 04


CSS2 與 CSS3 的滑入( :hover )比較:

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

CSS 語法 - 網頁設計  - 淺談 CSS3 Transition 轉場動畫效果 - 011

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

Demo
CSS 語法 - 網頁設計  - 淺談 CSS3 Transition 轉場動畫效果 - 021

CSS3 Transition 的屬性使用

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

總結:

CSS3 可以用來做簡單的動畫效果,效能還比用 jQuery 好,適合用在 Mobile Web 行動裝置網站的開發上。再加上 IOS 與 Android 的瀏覽器都支援 CSS3 ,所以,並不需要去擔心支援度的問題。

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , , , , .

迴響已被關閉。