摘要：然而通過自定義貝塞爾曲線的值，可以滿足你具體的動(dòng)畫時(shí)間需求。關(guān)于如何使用貝塞爾曲線的方法我們可以通過查看的開發(fā)者網(wǎng)站動(dòng)畫延時(shí)動(dòng)畫延時(shí)常常應(yīng)用于當(dāng)我們需要對(duì)動(dòng)畫進(jìn)行的延時(shí)操作的時(shí)候。從而減少大部分動(dòng)畫執(zhí)行期間潛在的性能損耗問題。

注：原文有較大改動(dòng)
使用 keyframes, animation屬性，例如timing, delay, play state, animation-count, iteration count, direction, fill mode以及will-change等等

創(chuàng)造動(dòng)畫魔法

作為設(shè)計(jì)者、開發(fā)人員，除去精簡(jiǎn)的用戶界面，更好的頁(yè)面加載速度外，我們發(fā)現(xiàn)通過給界面添加動(dòng)畫效果，可以增加用戶與網(wǎng)站的互動(dòng)率，能夠更好的吸引用戶使用我們的產(chǎn)品。CSS3 相對(duì)于原先的基于 JavaScript 操作 Dom 實(shí)現(xiàn)動(dòng)畫的方式而已，CSS如今擁有更好的兼容性。所以本文就介紹CSS動(dòng)畫的一些基本知識(shí)。

keyframes

通過逐漸改變對(duì)象的運(yùn)動(dòng)狀態(tài)的方式，我們可以將動(dòng)畫應(yīng)用到到頁(yè)面上的任何對(duì)象上。然而利用keyframes特性，我們便可以控制動(dòng)畫對(duì)象每一階段的狀態(tài)。

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

我們嘗試思考以下這個(gè)例子:

動(dòng)畫名（Animation name): pulse

3個(gè)步驟：0%（state time), 50%（x time）, 100% （end time）

CSS值：scale3d(x, y, z)

當(dāng)動(dòng)畫已經(jīng)在(@keyframes)中定義好后，我們可以控制以下幾樣?xùn)|西：

動(dòng)畫的持續(xù)時(shí)間

延遲多久動(dòng)畫開始

動(dòng)畫的重復(fù)頻率

動(dòng)畫的方向

以下是實(shí)現(xiàn)示例：

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

在以上示例中，我們給一個(gè)Button添加了動(dòng)畫 pulse，定義了持續(xù)時(shí)長(zhǎng)(duration)為1秒。 如果我們調(diào)整了這個(gè)持續(xù)時(shí)長(zhǎng)屬性的值，則可以看到這個(gè)Button就會(huì)出現(xiàn)一個(gè)還不錯(cuò)的效果。如圖：

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

1.動(dòng)畫時(shí)間（Animation Timing)

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

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

動(dòng)畫時(shí)間函數(shù)：左（ease）右（linear）
以上的選項(xiàng)是很直接的調(diào)整動(dòng)畫的方法。然而通過自定義貝塞爾曲線的值，可以滿足你具體的動(dòng)畫時(shí)間需求。

關(guān)于如何使用貝塞爾曲線的方法我們可以通過查看Mozilla的開發(fā)者網(wǎng)站

2.動(dòng)畫延時(shí) （Animation Delay）

動(dòng)畫延時(shí)常常應(yīng)用于當(dāng)我們需要對(duì)動(dòng)畫進(jìn)行的延時(shí)操作的時(shí)候。即當(dāng)某個(gè)動(dòng)畫被觸發(fā)了，然后延時(shí)1S后開始執(zhí)行。例如： 我們對(duì)“Send FeedBack"按鈕添加了延時(shí)處理：

動(dòng)畫延時(shí)：左(1秒), 右(2秒)

3.動(dòng)畫播放狀態(tài)（Animation Play State）

動(dòng)畫播放狀態(tài)常常用來控制動(dòng)畫是否需要暫停或者繼續(xù)。

運(yùn)行（running)： 動(dòng)畫繼續(xù)

暫停（paused）: 動(dòng)畫停止

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

4.動(dòng)畫的循環(huán)次數(shù)

循環(huán)次數(shù)指單位時(shí)間內(nèi)，動(dòng)畫所重復(fù)執(zhí)行的次數(shù)。

無限(infinite)：無限循環(huán)

指定值(x)：動(dòng)畫重復(fù)x次

繼承(inherit)：繼承父級(jí)的循環(huán)次數(shù)

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

5.動(dòng)畫方向（Animation Direction）

動(dòng)畫方向是用于指定動(dòng)畫對(duì)象的移動(dòng)方向。例如是從尺寸0%到100%，還是從100%到%0，又或者是從0%到100%的大小，然后反轉(zhuǎn)從100%到0%。

順序的(Normal): 指動(dòng)畫從0%到100%順序執(zhí)行

倒序(Reverse): 動(dòng)畫從100%作為起點(diǎn)位置開始到0%倒序執(zhí)行

交替(Alernate): 動(dòng)畫先從0%變化到100%，然后從100%返回到0%

反轉(zhuǎn)-交替(Alternate-reverse): 動(dòng)畫從100%到0%倒序， 然后又從0%前進(jìn)到100%正序執(zhí)行

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

6.動(dòng)畫填充模式（Animation Fill Mode）

我們需要知道，當(dāng)動(dòng)畫執(zhí)行結(jié)束后，在動(dòng)畫執(zhí)行期間給對(duì)象元素所添加的樣式并不是永久的。這個(gè)樣式僅僅是在動(dòng)畫期間被應(yīng)用然后即被移除。關(guān)于動(dòng)畫應(yīng)用的模式，我們可以使用以下屬性值來表示：

向后（Backward）: 在動(dòng)畫處于0%時(shí)，樣式會(huì)被應(yīng)用到元素上

向前（Forward）: 在動(dòng)畫處于100%時(shí)，樣式會(huì)被應(yīng)用到元素上

兼得（Both): 在動(dòng)畫開始和結(jié)束時(shí)樣式會(huì)被應(yīng)用

初始值（Initial): 設(shè)置這個(gè)屬性為默認(rèn)值

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

7.將要改變（Will-Change）

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

button { 
   will-change: transform, opacity; 
}

下面的代碼我聲明了將會(huì)對(duì)所有元素的所有屬性執(zhí)行動(dòng)畫，即使是非動(dòng)畫區(qū)域。

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

很顯然，上面的這種使用方法會(huì)帶來一些沒有必要的系統(tǒng)資源的占用和性能損耗。
所以，我們應(yīng)該盡可能在所需要的元素上使用CSS動(dòng)畫。更多關(guān)于 Will-Change 的特性的信息請(qǐng)看：https://dev.opera.com/articles/css-will-change-property/

4個(gè)超級(jí)屬性

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

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

結(jié)語(yǔ)

以上列舉的都是些實(shí)現(xiàn)CSS動(dòng)畫的基本屬性，一旦了解了這些基礎(chǔ)，從而更方便的開始進(jìn)行動(dòng)畫創(chuàng)作。
關(guān)于很多你可能感興趣的CSS動(dòng)畫應(yīng)用和實(shí)例資源，可以查看Codepen的CSS動(dòng)畫單元。

翻譯地址：http://imziv.com/blog/article...

原文鏈接：https://stories.jotform.com/h...

個(gè)人建了前端學(xué)習(xí)群，旨在一起學(xué)習(xí)前端。純凈、純粹技術(shù)討論，非前端人員勿擾！入群加我微信：iamaixiaoxiao。