深入理解CSS過渡transition

標籤：font   點擊   family   瀏覽器   事件   動態   func   bsp   指定   

　　過渡屬性看似簡單，但實際上它有很多需要注意的細節和容易混淆的地方。本文記錄一下自己的看法和一些收集來的資料。

　　那就直接開始了~~~

　　早期在Web中要實現動畫效果，都是依賴於JavaScript或Flash來完成。但在CSS3中新增加了一個新的模組transition，它可以通過一些簡單的CSS事件來觸發元素的外觀變化，讓效果顯得更加細膩。

　　簡單點說，就是通過滑鼠的單擊、獲得焦點，被點擊或對元素任何改變中觸發，並平滑地以動畫效果改變CSS的屬性值。

　　在CSS中建立簡單的過渡效果可以從以下幾個步驟來實現：

　　　　一、在預設樣式中聲明元素的初始狀態樣式；

　　　　二、聲明過渡元素最終狀態樣式，比如懸浮狀態；

　　　　三、在預設樣式中通過添加過渡函數，添加一些不同的樣式。

　　

　　CSS3的過度transition屬性是一個複合屬性，主要包括以下幾個子屬性：

 

• • 　　transition-property:指定過渡或動態類比的CSS屬性（預設值為all）

  • 　　transition-duration:指定完成過渡所需的時間（預設值為0s）

  • 　　transition-timing-function:指定過渡函數（預設值為ease函數）

  • 　　transition-delay:指定開始出現的延遲時間（預設值為0s）

 

[注意]IE9-不支援該屬性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-首碼；而其餘高版本瀏覽器支援標準寫法

深入理解CSS過渡transition