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

標籤：lsa   地址   表示   ati   iam   ie10   括弧   aml   logs   

    Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation製作的動畫效果的CSS集合。 

    官網各種動畫的示範地址：https://daneden.github.io/animate.css/ 

    它預設了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達 60 多種動畫效果，幾乎包含了所有常見的動畫效果。換句話說：Animate.css就是一大堆的很酷，很有趣，而且很炫又能跨瀏覽器的動畫效果樣式集錦，可以直接使用到項目中。

 

瀏覽器安全色：

 

    當然是只相容支援 CSS3 animate 屬性的瀏覽器，他們分別是：IE10+、Firefox、Chrome、Opera、Safari。

 

使用方法

 

1、引入檔案

 

2、HTML 及使用

 

給元素加上 class 後，重新整理頁面，就能看到動畫效果了。animated 類似於全域變數，它定義了動畫的期間；bounce 是動畫具體的動畫效果的名稱，你可以選擇任意的效果。

 

如果動畫是無限播放的，可以添加 class infinite。

你也可以通過 JavaScript 或 jQuery 給元素添加這些 class，比如：

 

有些動畫效果最後會讓元素不可見，比如淡出、向左滑動等等，可能你又需要將 class 刪除，比如：

 

animate.css 的預設設定也許有些時候並不是我們想要的，所以你可以重新設定，比如：

 

注意：一定要在CSS恬當的的首碼(webkit, moz,o等)代替“vendor”

文法:

 

 

過渡動畫

       第一種叫過渡（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

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