完整學習使用CSS動畫

使用 keyframes ,  animation 屬性，例如 timing ,   delay ,  play state ,  animation-count ,  iteration count ,  direction ,   fill mode 以及 will-change 等等 創造動畫魔法

作為設計者、開發人員，除去精簡的用戶界面，更好的頁面加載速度外，我們發現通過給界面添加動畫效果，可以增加用戶與網站的互動率，能夠更好的吸引用戶使用我們的產品。CSS3相對于原先的基于Javascript操作Dom實現動畫的方式而已，CSS如今擁有更好的兼容性。所以本文就介紹CSS動畫的一些基本知識。

keyframes

通過逐漸改變對象的運動狀態的方式，我們可以將動畫應用到到頁面上的任何對象上。然而利用 keyframes 特性，我們便可以控制動畫對象每一階段的狀態。

@keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50%{
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

我們嘗試思考以下這個例子:

1. 動畫名（Animation name): pulse
2. 3個步驟：0%（state time), 50%（x time）, 100% （end time）
3. CSS值：scale3d(x, y, z)

當動畫已經在(@keyframes)中定義好后，我們可以控制以下幾樣東西：

• 動畫的持續時間
• 延遲多久動畫開始
• 動畫的重復頻率
• 動畫的方向

以下是實現示例：

button { 
   animation-duration: 1s; 
   animation-name: pulse; 
}

在以上示例中，我們給一個Button添加了動畫 pulse ，定義了持續時長(duration)為1秒。 如果我們調整了這個持續時長屬性的值，則可以看到這個Button就會出現一個還不錯的效果。如圖：

Demo地址： http://codepen.io/phyesix/pen/EZebOJ

2. 動畫時間（Animation Timing)

動畫時間函數是用于決定我們希望動畫在移動周期內要進行加速和減速效果的時間。所以，為了實現這個效果，我們需要定義動畫將要移動的速度。這里有一些我們常見的動畫時間屬性的選項值，例如： initial ,  inherit ,  ease ,  ease-in ,  ease-out , 還有 linear 等等。

引用： https://i.stack.imgur.com/qyvON.png

動畫時間函數：左（ease）右（linear）

以上的選項是很直接的調整動畫的方法。然而通過自定義貝塞爾曲線的值，可以滿足你具體的動畫時間需求。

關于如何使用貝塞爾曲線的方法我們可以通過查看Mozilla的 開發者網站

3. 動畫延時 （Animation Delay）

動畫延時常常應用于當我們需要對動畫進行的延時操作的時候。即當某個動畫被觸發了，然后延時1S后開始執行。例如： 我們對“Send FeedBack"按鈕添加了延時處理：

動畫延時：左(1秒), 右(2秒)

4. 動畫播放狀態（Animation Play State）

動畫播放狀態常常用來控制動畫是否需要暫停或者繼續。

• 運行（running)： 動畫繼續
• 暫停（paused）: 動畫停止

  

  Demo地址： http://codepen.io/phyesix/pen/apaYXr

5. 動畫的循環次數

循環次數指單位時間內，動畫所重復執行的次數。

• 無限(infinite)：無限循環
• 指定值(x)：動畫重復x次
• 繼承(inherit)：繼承父級的循環次數

  

  Demo地址： http://codepen.io/phyesix/pen/EZeELr

6. 動畫方向（Animation Direction）

動畫方向是用于指定動畫對象的移動方向。例如是從尺寸0%到100%，還是從100%到%0，又或者是從0%到100%的大小，然后反轉從100%到0%。

• 順序的(Normal): 指動畫從0%到100%順序執行
• 倒序(Reverse): 動畫從100%作為起點位置開始到0%倒序執行
• 交替(Alernate): 動畫先從0%變化到100%，然后從100%返回到0%
• 反轉-交替(Alternate-reverse): 動畫從100%到0%倒序， 然后又從0%前進到100%正序執行

  

  Demo地址： http://codepen.io/phyesix/pen/apaYXr

7. 動畫填充模式（Animation Fill Mode）

我們需要知道，當動畫執行結束后，在動畫執行期間給對象元素所添加的樣式并不是永久的。這個樣式僅僅是在動畫期間被應用然后即被移除。關于動畫應用的模式，我們可以使用以下屬性值來表示：

• 向后（Backward）: 在動畫處于0%時，樣式會被應用到元素上
• 向前（Forward）: 在動畫處于100%時，樣式會被應用到元素上
• 兼得（Both): 在動畫開始和結束時樣式會被應用
• 初始值（Initial): 設置這個屬性為默認值

Demo地址： http://codepen.io/phyesix/pen/PWgqLj

8. 將要改變（Will-Change）

非常感謝 Will-Change 特性。可以通過 Will-Change 屬性，我們可以在動畫執行前，提前通知瀏覽器上我們將要執行動畫的對象元素。這就允許了我們可以一次性的對元素的多個屬性進行動畫操作。從而減少大部分動畫執行期間潛在的性能損耗問題。

button { 
   will-change: transform, opacity; 
}

下面的代碼我聲明了將會對所有元素的所有屬性執行動畫，即使是非動畫區域。

*, *::before, *::after { 
    will-change: all 
}

很顯然，上面的這種使用方法會帶來一些沒有必要的系統資源的占用和性能損耗。 所以，我們應該盡可能在所需要的元素上使用CSS動畫。

4個超級屬性

在keyframes里，我們幾乎可以使用任何的CSS屬性。在如今的大部分瀏覽器中，你可以放心的使用 position ,  scale ,  rotation ,  opacity 等等屬性值。并且這4個屬性可以給動畫效果帶來更高效，更好的性能表現。

引用： https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

結語

以上列舉的都是些實現CSS動畫的基本屬性，一旦了解了這些基礎，從而更方便的開始進行動畫創作。 關于很多你可能感興趣的CSS動畫應用和實例資源，可以查看 Codepen的CSS動畫 單元。

 

 

來自：http://www.cnblogs.com/zivxiaowei/p/6479113.html