CSS3過渡動畫&關鍵幀動畫

1、過渡動畫

過渡（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只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。

2、關鍵幀動畫

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

註釋：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屬性，達到一種動畫的效果。

3、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裏面所定義的就好了。注意添加瀏覽器前綴。