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 的屬性使用
屬性 | 說明 |
---|---|
transition | 此寫法為縮寫可分別放入 transition 的四項屬性。 |
transition-property | 指定 transition 效果所要控制的屬性。 |
transition-duration | 指定多少時間完成 transition 效果。 |
transition-timing-function | 指定 transition 的速度效果。 |
transition-delay | 指定 transition 效果的開始時間。 |
沒有留言 :
張貼留言