CSS3過渡動畫&關鍵幀動畫

一、過渡動畫

過渡（transition）動畫，就是從初始狀態過渡到結束狀態這個過程中所產生的動畫。
所謂的狀態就是指大小、位置、顏色、變形（transform）等等這些屬性。

Note：不是所有屬性都能過渡，只有屬性具有一個中間點值才具備過渡效果。
點擊查看完整列表。

css過渡只能定義首和尾兩個狀態，所以是最簡單的一種動畫。
注釋：Internet Explorer 9 以及更早版本的IE瀏覽器不支持 transition 屬性。

如何在項目中正確、熟練地應用transition動畫？

第一步：在目標元素的樣式聲明中定義元素的初始狀態，然后在同一聲明中用 transition 屬性配置動畫的各種參數。

可定義的參數有：

• transition-property：規定對哪個屬性進行過渡。
• transition-duration：定義過渡的時間，默認是0。
• transition-timing-function：定義過渡動畫的緩動效果，如淡入、淡出等。
• linear 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。
• ease（默認值）規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
• ease-in 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。
• ease-out 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。
• ease-in-out 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。
• cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。
• transition-delay：規定過渡效果的延遲時間，即在過了這個時間后才開始動畫，默認是0。

注意：要在同一代碼塊中定義元素初始狀態（樣式），添加transition屬性。
如果想要同時過渡多個屬性，可以用逗號隔開。

 

 

第二步：改變元素的狀態。

為目標元素添加偽類或添加聲明了最終狀態的類。
使用 transtion 屬性只是規定了要如何去過渡，要想讓動畫發生，還得要有元素狀態的改變。如何改變元素狀態呢，當然就是在css中給這個元素定義一個類（:hover等偽類也可以），這個類描述的是過渡動畫結束時元素的狀態。

除了使用hover等系統提供的偽類外，我們也可以隨意的定義自己的類，然后想要過渡時就通過js把類加到元素上面。

注意：單純的代碼不會觸發任何過渡操作，需要通過用戶的行為（如點擊，懸浮等）觸發。可觸發的方式有：:hover :focus :checked 媒體查詢觸發 JavaScript觸發。

示例1：

 

 

示例2：
當鼠標懸停在img元素上時，改變img元素的尺寸。改變的整個過程是平滑過渡的，不是快速、突兀的。

img { height:15px; /*初始值*/ width:15px; transition:1s1s height; /*過渡*/ } img:hover { height:450px; /*最終值*/ width:450px; } 

過渡動畫的局限性

transition的優點在於簡單易用，但是它有幾個很大的局限。
（1）transition需要事件觸發，所以沒法在網頁加載時自動發生。
（2）transition是一次性的，不能重復發生，除非一再觸發。
（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。

二、關鍵幀動畫

不同於過渡動畫只能定義首尾兩個狀態，關鍵幀動畫可以定義多個狀態，或者用關鍵幀的話來說，過渡動畫只能定義第一幀和最后一幀這兩個關鍵幀，而關鍵幀動畫則可以定義任意多的關鍵幀，因而能實現更復雜的動畫效果。

注釋：Internet Explorer 9 以及更早的IE版本不支持 animation 屬性。

如何在項目中正確、熟練地應用animation動畫？

animation就相當於用@keyframes預先定義好元素在整個過渡過程中將要經歷的各個狀態，然后再通過animation屬性將這些狀態一次性賦給該元素。

第一步：通過類似Flash動畫中的幀來聲明一個動畫。

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

@keyframes 動畫名稱 { 時間點 {元素狀態} 時間點 {元素狀態} …} 

一般來說，0%和100%這兩個關鍵幀是必須要定義的。0%可以由from代替，100%可以由to代替。

第二步：在目標元素的樣式聲明中使用animation屬性調用關鍵幀聲明的動畫。

現在我們知道了怎么去定義一個關鍵幀動畫了，那怎么去實現這個動畫呢？其實很簡單，只要把這個動畫綁定到某個要進行動畫的元素上就行了。把動畫綁定到元素上，我們可以使用animation屬性。

可配置的參數有：

• animation-name：none為默認值，將沒有任何動畫效果，其可以用來覆蓋任何動畫。
• animation-duration：默認值為0s，意味着動畫周期為0s，也就是沒有任何動畫效果。
• animation-timing-function：與transition-timing-function一樣。
• animation-delay：在開始執行動畫時需要等待的時間。
• animation-iteration-count：定義動畫的播放次數，默認為1，如果為infinite，則無限次循環播放。
• animation-direction：默認為nomal，每次循環都是向前播放，（0-100）。另一個值為alternate，動畫播放為偶數次則向前播放，如果為基數詞就反方向播放。
• animation-state：默認為running，播放，paused，暫停。
• animation-fill-mode：定義動畫開始之前和結束之后發生的操作。
• none（默認值），動畫結束時回到動畫沒開始時的狀態；
• forwards，動畫結束后繼續應用最后關鍵幀的位置，即保存在結束狀態；
• backwards，讓動畫回到第一幀的狀態；
• both：輪流應用forwards和backwards規則；

注意：只要把定義好的動畫綁定到元素上，就能實現關鍵幀動畫了，而不是像第一種過渡動畫那樣，需要一個狀態的改變才能觸發動畫。
animation屬性到目前為止得到了大多數瀏覽器的支持，但是，需要添加瀏覽器前綴！另外，@keyframes必須要加webkit前綴。

示例：

div:hover { -webkit-animation:1s changeColor; /*調用動畫*/ animation:1s changeColor; } @-webkit-keyframes changeColor { /*聲明動畫*/ 0% {background:#c00;} 50%{background:orange;} 100%{background:yellowgreen;} } @keyframes changeColor { 0%{background:#c00;} 50%{background:orange;} 100%{background:yellowgreen;} } 

過渡動畫與關鍵幀動畫的區別

animation屬性類似於transition，他們都是隨着時間變化而改變元素的屬性值，其主要區別在於：transition需要觸發一個事件才會隨着時間改變其CSS屬性；animation在不需要觸發任何事件的情況下，也可以顯式的隨時間變化來改變元素CSS屬性，達到一種動畫的效果。

三、animate.css動畫庫

animate.css是一個css3動畫庫，可以到github上去下載，里面預設了很多種常用的動畫，使用也很簡單，因為它是把不同的動畫綁定到了不同的類里，所以我們想要使用哪種動畫的時候，只需要簡單的把那個相應的類添加到元素上就行了。

該庫大致包含如下這些動畫效果：

1. bounce（跳動）、flash（閃光）、pulse（脈沖）、rubber band（橡皮筋）、shake（抖動）、swing（搖擺）、wobble（搖擺不定）
2. fade（淡入或淡出）
3. flip（翻轉）
4. rotate（旋轉）
5. slide（滑動）
6. zoom（放大或縮小）

如何在項目中正確、熟練地應用animate動畫庫？

（1）：在head中引入animate.min.css文件。
注：由於animate.min.css默認包含所有的動畫效果。因此當我們僅使用其中的幾個動畫效果時，我們最好使用gulp構建僅包含我們需求的animate.min.css，這樣可以避免我們引入的animate.min.css文件體積過大。

如何使用gulp構建符合我們需求的animate.min.css？

第一步：將整個animate.css項目下載下來，作為生產環境的依賴：

npm install animate.css --save 

第二步：進入animate.css項目根目錄下：

$cd path/to/animate.css/ 

第三步：加載dev依賴：

npm install 

第四步：根據實際需要修改animate-config.json文件：
例如：我們只需要這兩個動畫效果：bounceIn和bounceOut。

{
    "bouncing_entrances": [ "bounceIn" ], "bouncing_exits": [ "bounceOut" ] } 

最后一步：進入animate.css項目下，運行gulp任務:gulp default，生成新的animate.min.css覆蓋默認的animate.min.css。

（2）你想要哪個元素進行動畫，就給那個元素添加上animated類 以及特定的動畫類名，animated是每個要進行動畫的元素都必須要添加的類。

 

 

你也可以在動畫完成后，把動畫類移除，以便可以再次進行同一個動畫。

 

 

至於動畫的配置參數，比如動畫持續時間，動畫的執行次數等等，你可以在你的的元素上自行定義，覆蓋掉animate.min.css里面所定義的就行了。注意添加瀏覽器前綴。