css3動畫簡介以及動畫庫animate.css的使用

原文地址：http://www.cnblogs.com/2050/p/3409129.html       

在這個年代，你要是不懂一點點css3的知識，你都很差意思說你是個美工。美你妹啊，請叫我前端工程師好很差。呃。。好吧，攻城屍。。。呵呵，做爲一個攻城屍，沒有點高端大氣上檔次的東西怎麼能行呢，那麼css3的動畫就絕對是值得你擁有了，雖然說IE9以及更早版本的IE瀏覽器都不支持css3動畫，可是IE6-8瀏覽器已經是江河日下，使用谷歌瀏覽器、火狐瀏覽器、IE10+瀏覽器以及移動端瀏覽器等這些支持css3動畫的瀏覽器的人數愈來愈多，因此若是很簡單的就能讓一部分人得到更好的用戶體驗，那何樂而不爲呢。

從廣義上來說，css3動畫能夠分爲兩種。

 

過渡動畫

       第一種叫過渡（transition）動畫，就是從初始狀態過渡到結束狀態這個過程當中所產生的動畫。所謂的狀態就是指大小、位置、顏色、變形（transform）等等這些屬性。css過渡只能定義首和尾兩個狀態，因此是最簡單的一種動畫。

要想使一個元素產生過渡動畫，首先要在這個元素上用transition屬性定義動畫的各類參數。可定義的參數有

transition-property：規定對哪一個屬性進行過渡

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

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

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

 

 

爲了書寫方便，也能夠把這四個屬性按照以上順序簡寫在一個 transition 屬性上：

 

若是是使屬性的默認值，則能夠省略：

至關於：

 

若是想要同時過渡多個屬性，能夠用逗號隔開，如：

 

使用transtion屬性只是規定了要如何去過渡，要想讓動畫發生，還得要有元素狀態的改變。如何改變元素狀態呢，固然就是在css中給這個元素定義一個類（:hover等僞類也能夠），這個類描述的是過渡動畫結束時元素的狀態。

這樣，當咱們把鼠標移動到div上的時候，div的狀態發生了變化，就能看到寬度從100到400，高度從100到400，背景顏色從黑到紅的，過渡時間爲3秒的過渡效果了。

除了使用hover等系統提供的僞類外，咱們也能夠隨意的定義本身的類，而後想要過渡時就經過js把類加到元素上面：

 

 

 

關鍵幀動畫

       第二種叫作關鍵幀（keyframes）動畫。不一樣於第一種的過渡動畫只能定義首尾兩個狀態，關鍵幀動畫能夠定義多個狀態，或者用關鍵幀來講的話，過渡動畫只能定義第一幀和最後一幀這兩個關鍵幀，而關鍵幀動畫則能夠定義任意多的關鍵幀，於是能實現更復雜的動畫效果。

關鍵幀動畫的定義方式也比較特殊，它使用了一個關鍵字 @keyframes 來定義動畫。具體格式爲：

@keyframes 動畫名稱{

      時間點 {元素狀態}

      時間點 {元素狀態}

      …

}

例如：

        這段代碼定義了一個名爲demo,且有5個關鍵幀的動畫。0% ，10% 等這些表示的是時間點，是相對於整個動畫的持續時間來講的，時間點以後的花括號裏則是元素的狀態屬性集合，描述了這個元素在這個時間點的狀態，動畫發生時，就是從第一個狀態到第二個狀態進行過渡，而後從第二個狀態到第三個狀態進行過渡，直到最後一個狀態。通常來講，0%和100%這兩個關鍵幀是必需要定義的。

 

關鍵幀的書寫方式很靈活，一行能夠寫多個關鍵幀。

甚至它們之間的空格也是能夠不要的。

 

如今咱們知道了怎麼去定義一個關鍵幀動畫了，那怎麼去實現這個動畫呢？其實很簡單，只要把這個動畫綁定到某個要進行動畫的元素上就好了。

把動畫綁定到元素上，咱們可使用animation屬性。animation屬性有如下這些：

像前面講的transition屬性同樣，也能夠把這些animation屬性簡寫到一個animation中，使用默認值的也能夠省略掉。但 animation-play-state 屬性不能簡寫到animation中。

 

只要像這樣把定義好的動畫綁定到元素上，就能實現關鍵幀動畫了，而不是像第一種過渡動畫那樣，須要一個狀態的改變才能觸發動畫。

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

注意，爲了達到最佳的瀏覽器兼容效果，在實際書寫代碼的時候，還必須加上各大瀏覽器的私有前綴

 

 

animate.css的使用

animate.css是一個css3動畫庫，能夠到github上去下載，裏面預設了不少種經常使用的動畫，能夠先在本頁看下演示效果，使用也很簡單，由於它是把不一樣的動畫綁定到了不一樣的類裏，因此咱們想要使用哪一種動畫的時候，只須要簡單的把那個相應的類添加到元素上就好了：

 

首先在head中引入下載的animate.css文件

 

而後你想要哪一個元素進行動畫，就給那個元素添加上animated類 以及特定的動畫類名，animated是每一個要進行動畫的元素都必需要添加的類。

假設使用jquery，要給一個id爲demo的元素添加一個搖動的動畫,由於搖動的動畫類名爲shake，因此代碼是這樣的：

 

這樣載入頁面，元素就能動起來了。你也能夠在動畫完成後，把動畫類移除，以即可以再次進行同一個動畫。

 

至於動畫的配置參數，好比動畫持續時間，動畫的執行次數等等，你能夠在你的的元素上自行定義，覆蓋掉animate.css裏面所定義的就好了。

注意這些屬性還要記得加上各瀏覽器的前綴。

總之是很靈活的，說到底不就是一個css文件嗎，一看就懂的，你在裏面想怎麼整就怎麼整，不想用它提供的類名，就在裏面改掉就好了。若是你只想用裏面的部分動畫，也能夠把那些要使用的動畫分離出來，它的官網也提供了這樣的功能。

 

 

 

 

 

下面展現了animate.css裏面提供的全部動畫，動畫名就是類名，你想使用哪一個動畫，加上這個類名就好了。

 

 

shakeflashswingbouncetadawobblepulse

flipflipInXflipOutXflipInYflipOutY

fadeInfadeInUpfadeInDownfadeInLeftfadeInRightfadeInUpBigfadeInDownBigfadeInLeftBigfadeInRightBig

fadeOutfadeOutUpfadeOutDownfadeOutLeftfadeOutRightfadeOutUpBigfadeOutDownBigfadeOutLeftBigfadeOutRightBig

slideInDownslideInLeftslideInRightslideOutUpslideOutLeftslideOutRight

bounceInbounceInDownbounceInUpbounceInLeftbounceInRight

bounceOutbounceOutDownbounceOutUpbounceOutLeftbounceOutRight

rotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRight

rotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRight

lightSpeedInlightSpeedOuthingerollInrollOut