W3C標準中對css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值。”

transition屬性的值包括以下四個：

 •transition-property： 指定對HTML元素的哪個css屬性進行過渡漸變處理，這個屬性可以是color、width、height等各種標準的css屬性。
 •transition-duration：指定屬性過渡的持續時間
 •transition-timing-function：指定漸變的速度：
1、ease：（逐漸變慢）默認值，ease函數等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)；
2、linear：（勻速），linear 函數等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)；
3、ease-in：(加速)，ease-in 函數等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)；
4、ease-out：（減速），ease-out 函數等同于貝塞爾曲線(0, 0, 0.58, 1.0)；
5、ease-in-out：（加速然后減速），ease-in-out 函數等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)；
6、cubic-bezier：（該值允許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定于曲線上點P1和點P2。所有值需在[0, 1]區域內，否則無效。
 •transition-delay：指定延遲時間，也就是經過多長時間才開始執行過渡過程。
 
瀏覽器兼容性

Internet Explorer 9 以及更早的版本，不支持 transition 屬性。

Internet Explorer 10, Firefox, Opera 和 Chrome支持transition 屬性。Chrome 25 以及更早的版本以及Safari 需要前綴 -webkit-。

下面還是以實例來說明transition的用法

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表