完整學習使用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動畫。更多關於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