本文將比較全面細(xì)致的梳理一下 CSS 動(dòng)畫的方方面面，針對(duì)每個(gè)屬性用法的講解及進(jìn)階用法的示意，希望能成為一個(gè)比較好的從入門到進(jìn)階的教程。

CSS 動(dòng)畫介紹及語(yǔ)法

首先，我們來(lái)簡(jiǎn)單介紹一下 CSS 動(dòng)畫。

最新版本的 CSS 動(dòng)畫由規(guī)范 -- CSS Animations Level 1[1] 定義。

CSS 動(dòng)畫用于實(shí)現(xiàn)元素從一個(gè) CSS 樣式配置轉(zhuǎn)換到另一個(gè) CSS 樣式配置。

動(dòng)畫包括兩個(gè)部分: 描述動(dòng)畫的樣式規(guī)則和用于指定動(dòng)畫開(kāi)始、結(jié)束以及中間點(diǎn)樣式的關(guān)鍵幀。

簡(jiǎn)單來(lái)說(shuō)，看下面的例子：

1. div { 
2.     animation: change 3s; 
3. } 
4.  
5. @keyframes change { 
6.     0% { 
7.         color: #f00; 
8.     } 
9.     100% { 
10.         color: #000; 
11.     } 
12. } 

1. animation: move 1s 部分就是動(dòng)畫的第一部分，用于描述動(dòng)畫的各個(gè)規(guī)則;
2. @keyframes move {} 部分就是動(dòng)畫的第二部分，用于指定動(dòng)畫開(kāi)始、結(jié)束以及中間點(diǎn)樣式的關(guān)鍵幀;

一個(gè) CSS 動(dòng)畫一定要由上述兩部分組成。

CSS 動(dòng)畫的語(yǔ)法

接下來(lái)，我們簡(jiǎn)單看看 CSS 動(dòng)畫的語(yǔ)法。

創(chuàng)建動(dòng)畫序列，需要使用 animation 屬性或其子屬性，該屬性允許配置動(dòng)畫時(shí)間、時(shí)長(zhǎng)以及其他動(dòng)畫細(xì)節(jié)，但該屬性不能配置動(dòng)畫的實(shí)際表現(xiàn)，動(dòng)畫的實(shí)際表現(xiàn)是由 @keyframes 規(guī)則實(shí)現(xiàn)。

animation 的子屬性有：

• animation-name：指定由 @keyframes 描述的關(guān)鍵幀名稱。
• animation-duration：設(shè)置動(dòng)畫一個(gè)周期的時(shí)長(zhǎng)。
• animation-delay：設(shè)置延時(shí)，即從元素加載完成之后到動(dòng)畫序列開(kāi)始執(zhí)行的這段時(shí)間。
• animation-direction：設(shè)置動(dòng)畫在每次運(yùn)行完后是反向運(yùn)行還是重新回到開(kāi)始位置重復(fù)運(yùn)行。
• animation-iteration-count：設(shè)置動(dòng)畫重復(fù)次數(shù)， 可以指定 infinite 無(wú)限次重復(fù)動(dòng)畫
• animation-play-state：允許暫停和恢復(fù)動(dòng)畫。
• animation-timing-function：設(shè)置動(dòng)畫速度， 即通過(guò)建立加速度曲線，設(shè)置動(dòng)畫在關(guān)鍵幀之間是如何變化。
• animation-fill-mode：指定動(dòng)畫執(zhí)行前后如何為目標(biāo)元素應(yīng)用樣式
• @keyframes 規(guī)則，當(dāng)然，一個(gè)動(dòng)畫想要運(yùn)行，還應(yīng)該包括 @keyframes 規(guī)則，在內(nèi)部設(shè)定動(dòng)畫關(guān)鍵幀

其中，對(duì)于一個(gè)動(dòng)畫：

• 必須項(xiàng)：animation-name、animation-duration 和 @keyframes規(guī)則
• 非必須項(xiàng)：animation-delay、animation-direction、animation-iteration-count、animation-play-state、animation-timing-function、animation-fill-mode，當(dāng)然不是說(shuō)它們不重要，只是不設(shè)置時(shí)，它們都有默認(rèn)值

上面已經(jīng)給了一個(gè)簡(jiǎn)單的 DEMO， 就用上述的 DEMO，看看結(jié)果：

這就是一個(gè)最基本的 CSS 動(dòng)畫，本文將從 animation 的各個(gè)子屬性入手，探究 CSS 動(dòng)畫的方方面面。

animation-name / animation-duration 詳解

整體而言，單個(gè)的 animation-name 和 animation-duration 沒(méi)有太多的技巧，非常好理解，放在一起。

首先介紹一下 animation-name，通過(guò) animation-name，CSS 引擎將會(huì)找到對(duì)應(yīng)的 @keyframes 規(guī)則。

當(dāng)然，它和 CSS 規(guī)則命名一樣，也存在一些騷操作。譬如，他是支持 emoji 表情的，所以代碼中的 animation-name 命名也可以這樣寫：

1. div { 
2.     animation: