注：原文有較大改動

使用
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);
  }
}

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

動畫名（Animation name): pulse
3個步驟：0%（state time), 50%（x time）, 100% （end time）
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%正序執行

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動畫。更多關于

Will-Change

的特性的資訊請看：https://dev.opera.com/articles/css-will-change-property/

4個超級屬性

在keyframes裡，我們幾乎可以使用任何的CSS屬性。在如今的大部分浏覽器中，你可以放心的使用

position

scale

rotation

opacity

等等屬性值。并且這4個屬性可以給動畫效果帶來更高效，更好的性能表現。

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

結語

以上列舉的都是些實作CSS動畫的基本屬性，一旦了解了這些基礎，進而更友善的開始進行動畫創作。關于很多你可能感興趣的CSS動畫應用和執行個體資源，可以檢視Codepen的CSS動畫單元。

翻譯位址：http://imziv.com/blog/article/read.htm?id=82

原文連結：https://stories.jotform.com/how-to-use-css-animations-like-a-pro-dfacc1e97338#.tgenux32r

作者：Ziv小威

出處：http://imziv.com/

關于作者：專注于Java技術的程式員一枚，此外對JS開發保持着較高的興趣。愛好音樂，閱讀，FM等等。

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接。

如有問題，可以郵件：[email protected]

微網誌：Ziv小威

完整學習使用CSS動畫【翻譯】