哇… 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://tympanus.net/Tutorials/AnimatedButtons/index4.html
CSS2 與 CSS3 的滑入( :hover )比較:
如下圖,在傳統 CSS2 的表現之下,透過 CSS 的 background-color 屬性設定會看到紅色直接替換成藍色。
CSS3 Transition 的基本精神是在 CSS 屬性改變時自動生成中間的轉場動畫效果近似與補間動畫的意涵。若將 Transition 的作用時間設定成 1 秒鐘,則初始狀態為下圖左( 0 秒);滑入過程中的狀態為下圖中( 0.5 秒);滑入後的呈現狀態為下圖右( 1 秒 )。
CSS3 Transition 的屬性使用
屬性 | 說明 |
transition | 此寫法為縮寫可分別放入 transition 的四項屬性。 |
transition-property | 指定 transition 效果所要控制的屬性。 |
transition-duration | 指定多少時間完成 transition 效果。 |
transition-timing-function | 指定 transition 的速度效果。 |
transition-delay | 指定 transition 效果的開始時間。 |
總結:
CSS3 可以用來做簡單的動畫效果,效能還比用 jQuery 好,適合用在 Mobile Web 行動裝置網站的開發上。再加上 IOS 與 Android 的瀏覽器都支援 CSS3 ,所以,並不需要去擔心支援度的問題。
當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!