css3動畫簡介

明天放國慶節了，今天無意工做，只想划水.......更個博客但願時間過的快一點 逃:)

大體會講一下css3的動畫，ie9和更早的ie不支持css3動畫，其餘瀏覽器均可以很好的兼容，動畫是提高用戶體驗的重要途徑。

廣義上來說css3動畫分紅兩種。

過渡動畫

簡介

從初始狀態（大小、位置、顏色、變形【transform】等）過渡到結束狀態的動畫，只能定義首尾兩個狀態，是最簡單的一種動畫。

參數

要是一個元素產生動畫，須要在transition屬性定義參數。

transition-property: 規定對那個屬性進行過渡

transition-duration: 定義過渡的時間，默認是0

transtiton-timing-function: 定義過渡動畫的緩動效果，淡入、淡出等，默認是ease

transition-delay: 規定過渡效果的延遲時間，即在過了這個時間後纔開始動畫，默認是0

div {
  transition-property: width; //對寬度進行過渡
  transtition-duration: 3s;  //過渡時間是3s
  transition-timing-function: ease;
  transition-delay: 3s;  
}

爲了方便，有的時候能夠把這四個屬性按照上面的順序房子一個transition屬性上面（默認值能夠省略，過渡多個屬性值能夠用逗號隔開）：

div{transtion: width 3s ease 3s}

使用transition屬性只是規定了要如何去過渡，動畫發生須要元素狀態的改變。

關鍵幀動畫

這種不像第一種只能定義首尾兩個狀態，關鍵幀動畫能夠定義多個狀態，能夠定義任意多的關鍵幀，實現更復雜的動畫效果。

使用@keyframes來定義動畫。具體格式爲：

@keyframes 動畫名稱{

　　時間點{元素狀態}

　　時間點{元素狀態}

　　...

}

如今咱們知道了怎麼去定義一個關鍵幀動畫了，實現的話就是把這個動畫綁定到某個要進行動畫的元素上就能夠了。

把動畫綁定到元素上，可使用animation屬性。好比：

有時候會存在瀏覽器兼容問題，在實際書寫代碼的時候，必須加上瀏覽器的私有前綴

--------------------------------------------------------------------------------------------------------------------

animate.css

animate.css是一個css3動畫庫，能夠到github上去下載，裏面預設了不少種經常使用的動畫，使用哪一種動畫就把相應的類添加到元素上就好了。