深入淺出 CSS 動(dòng)畫

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

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

首先，我們來簡(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)畫開始、結(jié)束以及中間點(diǎn)樣式的關(guān)鍵幀。

簡(jiǎn)單來說，看下面的例子：

div?{
????animation:?change?3s;
}

@keyframes?change?{
????0%?{
????????color:?#f00;
????}
????100%?{
????????color:?#000;
????}
}

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

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

CSS 動(dòng)畫的語法

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

創(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)畫序列開始執(zhí)行的這段時(shí)間。
• animation-direction：設(shè)置動(dòng)畫在每次運(yùn)行完后是反向運(yùn)行還是重新回到開始位置重復(fù)運(yùn)行。
• animation-iteration-count：設(shè)置動(dòng)畫重復(fù)次數(shù)， 可以指定 infinite 無限次重復(fù)動(dòng)畫
• animation-play-state：允許暫停和恢復(fù)動(dòng)畫。
• animation-timing-function：設(shè)置動(dòng)畫速度， 即通過建立加速度曲線，設(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)然不是說它們不重要，只是不設(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 沒有太多的技巧，非常好理解，放在一起。

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

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

div?{
????animation:????3s;
}

@keyframes????{
????0%?{
????????color:?#f00;
????}
????100%?{
????????color:?#000;
????}
}

而 animation-duration 設(shè)置動(dòng)畫一個(gè)周期的時(shí)長(zhǎng)，上述 DEMO 中，就是設(shè)定動(dòng)畫整體持續(xù) 3s，這個(gè)也非常好理解。

animation-delay 詳解

animation-delay 就比較有意思了，它可以設(shè)置動(dòng)畫延時(shí)，即從元素加載完成之后到動(dòng)畫序列開始執(zhí)行的這段時(shí)間。

簡(jiǎn)單的一個(gè) DEMO：

<div>div>
<div>div>

div?{
????width:?100px;
????height:?100px;
????background:?#000;
????animation-name:?move;
????animation-duration:?2s;
}

div:nth-child(2)?{
????animation-delay:?1s;
}
@keyframes?move?{
????0%?{
????????transform:?translate(0);
????}
????100%?{
????????transform:?translate(200px);
????}
}

比較下列兩個(gè)動(dòng)畫，一個(gè)添加了 animation-delay，一個(gè)沒有，非常直觀：

上述第二個(gè) div，關(guān)于 animation 屬性，也可以簡(jiǎn)寫為 animation: move 2s 1s，第一個(gè)時(shí)間值表示持續(xù)時(shí)間，第二個(gè)時(shí)間值表示延遲時(shí)間。

animation-delay 可以為負(fù)值

關(guān)于 animation-delay，最有意思的技巧在于，它可以是負(fù)數(shù)。也就是說，雖然屬性名是動(dòng)畫延遲時(shí)間，但是運(yùn)用了負(fù)數(shù)之后，動(dòng)畫可以提前進(jìn)行。

假設(shè)我們要實(shí)現(xiàn)這樣一個(gè) loading 動(dòng)畫效果：

有幾種思路：

1. 初始 3 個(gè)球的位置就是間隔 120°，同時(shí)開始旋轉(zhuǎn)，但是這樣代碼量會(huì)稍微多一點(diǎn)
2. 另外一種思路，同一個(gè)動(dòng)畫，3 個(gè)元素的其中兩個(gè)延遲整個(gè)動(dòng)畫的 1/3，2/3 時(shí)間出發(fā)

方案 2 的核心偽代碼如下：

.item:nth-child(1)?{
????animation:?rotate?3s?infinite?linear;
}
.item:nth-child(2)?{
????animation:?rotate?3s?infinite?1s?linear;
}
.item:nth-child(3)?{
????animation:?rotate?3s?infinite?2s?linear;
}

但是，在動(dòng)畫的前 2s，另外兩個(gè)元素是不會(huì)動(dòng)的，只有 2s 過后，整個(gè)動(dòng)畫才是我們想要的：

此時(shí)，我們可以讓第 2、3 個(gè)元素的延遲時(shí)間，改為負(fù)值，這樣可以讓動(dòng)畫延遲進(jìn)行 -1s、-2s，也就是提前進(jìn)行 1s、2s：

.item:nth-child(1)?{
????animation:?rotate?3s?infinite?linear;
}
.item:nth-child(2)?{
????animation:?rotate?3s?infinite?-1s?linear;
}
.item:nth-child(3)?{
????animation:?rotate?3s?infinite?-2s?linear;
}

這樣，每個(gè)元素都無需等待，直接就是運(yùn)動(dòng)狀態(tài)中的，并且元素間隔位置是我們想要的結(jié)果：

利用 animation-duration 和 animation-delay 構(gòu)建隨機(jī)效果

還有一個(gè)有意思的小技巧。

同一個(gè)動(dòng)畫，我們利用一定范圍內(nèi)隨機(jī)的 animation-duration 和一定范圍內(nèi)隨機(jī)的 animation-delay，可以有效的構(gòu)建更為隨機(jī)的動(dòng)畫效果，讓動(dòng)畫更加的自然。

我在下述兩個(gè)純 CSS 動(dòng)畫中，都使用了這樣的技巧：

1. 純 CSS 實(shí)現(xiàn)華為充電動(dòng)畫^[2]：

2. 純 CSS 實(shí)現(xiàn)火焰動(dòng)畫^[3]：

以純 CSS 實(shí)現(xiàn)華為充電動(dòng)畫為例子，簡(jiǎn)單講解一下。

仔細(xì)觀察這一部分，上升的一個(gè)一個(gè)圓球，拋去這里的一些融合效果，只關(guān)注不斷上升的圓球，看著像是沒有什么規(guī)律可言：

我們來模擬一下，如果是使用 10 個(gè) animation-duration 和 animation-delay 都一致的圓的話，核心偽代碼：

<ul>
????<li>li>
?????
????<li>li>
ul>

ul?{
????display:?flex;
????flex-wrap:?nowrap;
????gap:?5px;
}
li?{
????background:?#000;
????animation:?move?3s?infinite?1s?linear;
}
@keyframes?move?{
????0%?{
????????transform:?translate(0,?0);
????}
????100%?{
????????transform:?translate(0,?-100px);
????}
}

這樣，小球的運(yùn)動(dòng)會(huì)是這樣的整齊劃一：

要讓小球的運(yùn)動(dòng)顯得非常的隨機(jī)，只需要讓 animation-duration 和 animation-delay 都在一定范圍內(nèi)浮動(dòng)即可，改造下 CSS：

@for?$i?from?1?to?11?{
????li:nth-child(#{$i})?{
????????animation-duration:?#{random(2000)/1000?+?2}s;
????????animation-delay:?#{random(1000)/1000?+?1}s;
????}
}

我們利用 SASS 的循環(huán)和 random() 函數(shù)，讓 animation-duration 在 2-4 秒范圍內(nèi)隨機(jī)，讓 animation-delay 在 1-2 秒范圍內(nèi)隨機(jī)，這樣，我們就可以得到非常自然且不同的上升動(dòng)畫效果，基本不會(huì)出現(xiàn)重復(fù)的畫面，很好的模擬了隨機(jī)效果：

CodePen Demo -- 利用范圍隨機(jī) animation-duration 和 animation-delay 實(shí)現(xiàn)隨機(jī)動(dòng)畫效果^[4]

animation-timing-function 緩動(dòng)函數(shù)

緩動(dòng)函數(shù)在動(dòng)畫中非常重要，它定義了動(dòng)畫在每一動(dòng)畫周期中執(zhí)行的節(jié)奏。

緩動(dòng)主要分為兩類：

1. cubic-bezier-timing-function 三次貝塞爾曲線緩動(dòng)函數(shù)
2. step-timing-function 步驟緩動(dòng)函數(shù)（這個(gè)翻譯是我自己翻的，可能有點(diǎn)奇怪）

三次貝塞爾曲線緩動(dòng)函數(shù)

首先先看看三次貝塞爾曲線緩動(dòng)函數(shù)。在 CSS 中，支持一些緩動(dòng)函數(shù)關(guān)鍵字。

/*?Keyword?values?*/
animation-timing-function:?ease;??//?動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢
animation-timing-function:?ease-in;??//?動(dòng)畫以低速開始
animation-timing-function:?ease-out;?//?動(dòng)畫以低速結(jié)束
animation-timing-function:?ease-in-out;?//?動(dòng)畫以低速開始和結(jié)束
animation-timing-function:?linear;?//?勻速，動(dòng)畫從頭到尾的速度是相同的

關(guān)于它們之間的效果對(duì)比：

除了 CSS 支持的這 5 個(gè)關(guān)鍵字，我們還可以使用 cubic-bezier() 方法自定義三次貝塞爾曲線：

animation-timing-function:?cubic-bezier(0.1,?0.7,?1.0,?0.1);

這里有個(gè)非常好用的網(wǎng)站 -- cubic-bezier^[5] 用于創(chuàng)建和調(diào)試生成不同的貝塞爾曲線參數(shù)。

三次貝塞爾曲線緩動(dòng)對(duì)動(dòng)畫的影響

關(guān)于緩動(dòng)函數(shù)對(duì)動(dòng)畫的影響，這里有一個(gè)非常好的示例。這里我們使用了純 CSS 實(shí)現(xiàn)了一個(gè)鐘的效果，對(duì)于其中的動(dòng)畫的運(yùn)動(dòng)，如果是 animation-timing-function: linear，效果如下：

而如果我們我把緩動(dòng)函數(shù)替換一下，變成 animation-timing-function: cubic-bezier(1,-0.21,.85,1.29)，它的曲線對(duì)應(yīng)如下：

整個(gè)鐘的動(dòng)畫律動(dòng)效果將變成這樣，完全不一樣的感覺：

CodePen Demo - 緩動(dòng)不同效果不同^[6]

對(duì)于許多精益求精的動(dòng)畫，在設(shè)計(jì)中其實(shí)都考慮到了緩動(dòng)函數(shù)。我很久之前看到過一篇《基于物理學(xué)的動(dòng)畫用戶體驗(yàn)設(shè)計(jì)》，可惜如今已經(jīng)無法找到原文。其中傳達(dá)出的一些概念是，動(dòng)畫的設(shè)計(jì)依據(jù)實(shí)際在生活中的表現(xiàn)去考量。

譬如 linear 這個(gè)緩動(dòng)，實(shí)際應(yīng)用于某些動(dòng)畫中會(huì)顯得很不自然，因?yàn)橛捎诳諝庾枇Φ拇嬖?，程序模擬的勻速直線運(yùn)動(dòng)在現(xiàn)實(shí)生活中是很難實(shí)現(xiàn)的。因此對(duì)于這樣一個(gè)用戶平時(shí)很少感知到的運(yùn)動(dòng)是很難建立信任感的。這樣的勻速直線運(yùn)動(dòng)也是我們?cè)谶M(jìn)行動(dòng)效設(shè)計(jì)時(shí)需要極力避免的。

步驟緩動(dòng)函數(shù)

接下來再講講步驟緩動(dòng)函數(shù)。在 CSS 的 animation-timing-function 中，它有如下幾種表現(xiàn)形態(tài)：

{
????/*?Keyword?values?*/
????animation-timing-function:?step-start;
????animation-timing-function:?step-end;

????/*?Function?values?*/
????animation-timing-function:?steps(6,?start)
????animation-timing-function:?steps(4,?end);
}

在 CSS 中，使用步驟緩動(dòng)函數(shù)最多的，就是利用其來實(shí)現(xiàn)逐幀動(dòng)畫。假設(shè)我們有這樣一張圖（圖片大小為 1536 x 256，圖片來源于網(wǎng)絡(luò)）：

可以發(fā)現(xiàn)它其實(shí)是一個(gè)人物行進(jìn)過程中的 6 種狀態(tài)，或者可以為 6 幀，我們利用 animation-timing-function: steps(6) 可以將其用一個(gè) CSS 動(dòng)畫串聯(lián)起來，代碼非常的簡(jiǎn)單：

<div?class="box">div>

.box?{
??width:?256px;
??height:?256px;
??background:?url('https://github.com/iamalperen/playground/blob/main/SpriteSheetAnimation/sprite.png?raw=true');
??animation:?sprite?.6s?steps(6,?end)?infinite;
}
@keyframes?sprite?{
??0%?{?
????background-position:?0?0;
??}
??100%?{?
????background-position:?-1536px?0;
??}
}

簡(jiǎn)單解釋一下上述代碼，首先要知道，剛好 256 x 6 = 1536，所以上述圖片其實(shí)可以剛好均分為 6 段：

1. 我們?cè)O(shè)定了一個(gè)大小都為 256px 的 div，給這個(gè) div 賦予了一個(gè) animation: sprite .6s steps(6) infinite 動(dòng)畫；
2. 其中 steps(6) 的意思就是將設(shè)定的 @keyframes 動(dòng)畫分為 6 次（6幀）執(zhí)行，而整體的動(dòng)畫時(shí)間是 0.6s，所以每一幀的停頓時(shí)長(zhǎng)為 0.1s；
3. 動(dòng)畫效果是由 background-position: 0 0 到 background-position: -1536px 0，由于上述的 CSS 代碼沒有設(shè)置 background-repeat，所以其實(shí) background-position: 0 0 是等價(jià)于 background-position: -1536px 0，就是圖片在整個(gè)動(dòng)畫過程中推進(jìn)了一輪，只不過每一幀停在了特點(diǎn)的地方，一共 6 幀；

將上述 1、2、3，3 個(gè)步驟畫在圖上簡(jiǎn)單示意：

從上圖可知，其實(shí)在動(dòng)畫過程中，background-position 的取值其實(shí)只有 background-position: 0 0，background-position: -256px 0，background-position: -512px 0 依次類推一直到 background-position: -1536px 0，由于背景的 repeat 的特性，其實(shí)剛好回到原點(diǎn)，由此又重新開始新一輪同樣的動(dòng)畫。

所以，整個(gè)動(dòng)畫就會(huì)是這樣，每一幀停留 0.1s 后切換到下一幀（注意這里是個(gè)無限循環(huán)動(dòng)畫），：

完整的代碼你可以戳這里 -- CodePen Demo -- Sprite Animation with steps() ^[7]

animation-duration 動(dòng)畫長(zhǎng)短對(duì)動(dòng)畫的影響

在這里再插入一個(gè)小章節(jié)，animation-duration 動(dòng)畫長(zhǎng)短對(duì)動(dòng)畫的影響也是非常明顯的。

在上述代碼的基礎(chǔ)上，我們?cè)傩薷?animation-duration，縮短每一幀的時(shí)間就可以讓步行的效果變成跑步的效果，同理，也可以增加每一幀的停留時(shí)間。讓每一步變得緩慢，就像是在步行一樣。

需要提出的是，上文說的每一幀，和瀏覽器渲染過程中的 FPS 的每一幀不是同一個(gè)概念。

看看效果，設(shè)置不同的 animation-duration 的效果（這里是 0.6s -> 0.2s），GIF 錄屏丟失了一些關(guān)鍵幀，實(shí)際效果會(huì)更好點(diǎn)：

當(dāng)然，在 steps() 中，還有 steps(6, start) 和 steps(6, end) 的差異，也就是其中關(guān)鍵字 start 和 end 的差異。對(duì)于上述的無限動(dòng)畫而言，其實(shí)基本是可以忽略不計(jì)的，它主要是控制動(dòng)畫第一幀的開始和持續(xù)時(shí)長(zhǎng)，比較小的一個(gè)知識(shí)點(diǎn)但是想講明白需要比較長(zhǎng)的篇幅，限于本文的內(nèi)容，在這里不做展開，讀者可以自行了解。

同個(gè)動(dòng)畫效果的補(bǔ)間動(dòng)畫和逐幀動(dòng)畫演繹對(duì)比

上述的三次貝塞爾曲線緩動(dòng)和步驟緩動(dòng)，其實(shí)就是對(duì)應(yīng)的補(bǔ)間動(dòng)畫和逐幀動(dòng)畫。

對(duì)于同個(gè)動(dòng)畫而言，有的時(shí)候兩種緩動(dòng)都是適用的。我們?cè)诰唧w使用的時(shí)候需要具體分析選取。

假設(shè)我們用 CSS 實(shí)現(xiàn)了這樣一個(gè)圖形：

現(xiàn)在想利用這個(gè)圖形制作一個(gè) Loading 效果，如果利用補(bǔ)間動(dòng)畫，也就是三次貝塞爾曲線緩動(dòng)的話，讓它旋轉(zhuǎn)起來，得到的效果非常的一般：

.g-container{
????animation:?rotate?2s?linear?infinite;
}
@keyframes?rotate?{
????0%?{
????????transform:?rotate(0);
????}
????100%?{
????????transform:?rotate(360deg);
????}
}

動(dòng)畫效果如下：

但是如果這里，我們將補(bǔ)間動(dòng)畫換成逐幀動(dòng)畫，因?yàn)橛?20 個(gè)點(diǎn)，所以設(shè)置成 steps(20)，再看看效果，會(huì)得到完全不一樣的感覺：

.g-container{
????animation:?rotate?2s?steps(20)?infinite;
}
@keyframes?rotate?{
????0%?{
????????transform:?rotate(0);
????}
????100%?{
????????transform:?rotate(360deg);
????}
}

動(dòng)畫效果如下：

整個(gè) loading 的圈圈看上去好像也在旋轉(zhuǎn)，實(shí)際上只是 20 幀關(guān)鍵幀在切換，整體的效果感覺更適合 Loading 的效果。

因此，兩種動(dòng)畫效果都是很有必要掌握的，在實(shí)際使用的時(shí)候靈活嘗試，選擇更適合的。

上述 DEMO 效果完整的代碼：CodePen Demo -- Scale Loading steps vs linear^[8]

animation-play-state

接下來，我們講講 animation-play-state，顧名思義，它可以控制動(dòng)畫的狀態(tài) -- 運(yùn)行或者暫停。類似于視頻播放器的開始和暫停。是 CSS 動(dòng)畫中有限的控制動(dòng)畫狀態(tài)的手段之一。

它的取值只有兩個(gè)（默認(rèn)為 running）：

{
????animation-play-state:?paused?|?running;
}

使用起來也非常簡(jiǎn)單，看下面這個(gè)例子，我們?cè)?hover 按鈕的時(shí)候，實(shí)現(xiàn)動(dòng)畫的暫停：

<div?class="btn?stop">stopdiv>
<div?class="animation">div>

.animation?{
????width:?100px;
????height:?100px;
????background:?deeppink;
????animation:?move?2s?linear?infinite?alternate;
}

@keyframes?move?{
????100%?{
????????transform:?translate(100px,?0);
????}
}

.stop:hover?~?.animation?{
????animation-play-state:?paused;
}

一個(gè)簡(jiǎn)單的 CSS 動(dòng)畫，但是當(dāng)我們 hover 按鈕的時(shí)候，給動(dòng)畫元素添加上 animation-play-state: paused：

animation-play-state 小技巧，默認(rèn)暫停，點(diǎn)擊運(yùn)行

正常而言，按照正常思路使用 animation-play-state: paused 是非常簡(jiǎn)單的。

但是，如果我們想創(chuàng)造一些有意思的 CSS 動(dòng)畫效果，不如反其道而行之。

我們都知道，正常情況下，動(dòng)畫應(yīng)該是運(yùn)行狀態(tài)，那如果我們將一些動(dòng)畫的默認(rèn)狀態(tài)設(shè)置為暫停，只有當(dāng)鼠標(biāo)點(diǎn)擊或者 hover 的時(shí)候，才設(shè)置其 animation-play-state: running，這樣就可以得到很多有趣的 CSS 效果。

看個(gè)倒酒的例子，這是一個(gè)純 CSS 動(dòng)畫，但是默認(rèn)狀態(tài)下，動(dòng)畫處于 animation-play-state: paused，也就是暫停狀態(tài)，只有當(dāng)鼠標(biāo)點(diǎn)擊杯子的時(shí)，才設(shè)置 animation-play-state: running，讓酒倒下，

完整的 DEMO 你可以戳這里：CodePen Demo -- CSS Beer!^[9]

在非常多 Web 創(chuàng)意交互動(dòng)畫我們都可以看到這個(gè)技巧的身影。

1. 頁面 render 后，無任何操作，動(dòng)畫不會(huì)開始。只有當(dāng)鼠標(biāo)對(duì)元素進(jìn)行 click ，通過觸發(fā)元素的 :active 偽類效果的時(shí)候，賦予動(dòng)畫 animation-play-state: running，動(dòng)畫才開始進(jìn)行；
2. 動(dòng)畫進(jìn)行到任意時(shí)刻，鼠標(biāo)停止點(diǎn)擊，偽類消失，則動(dòng)畫停止；

animation-fill-mode 控制元素在各個(gè)階段的狀態(tài)

下一個(gè)屬性 animation-fill-mode，很多人會(huì)誤認(rèn)為它只是用于控制元素在動(dòng)畫結(jié)束后是否復(fù)位。這個(gè)其實(shí)是不準(zhǔn)確的，不全面的。

看看它的取值：

{
????//?默認(rèn)值，當(dāng)動(dòng)畫未執(zhí)行時(shí)，動(dòng)畫將不會(huì)將任何樣式應(yīng)用于目標(biāo)，而是使用賦予給該元素的?CSS?規(guī)則來顯示該元素的狀態(tài)
????animation-fill-mode:?none;
????//?動(dòng)畫將在應(yīng)用于目標(biāo)時(shí)立即應(yīng)用第一個(gè)關(guān)鍵幀中定義的值，并在?`animation-delay`?期間保留此值，
????animation-fill-mode:?backwards;?
????//?目標(biāo)將保留由執(zhí)行期間遇到的最后一個(gè)關(guān)鍵幀計(jì)算值。?最后一個(gè)關(guān)鍵幀取決于?`animation-direction`?和?`animation-iteration-count`
????animation-fill-mode:?forwards;????
????//?動(dòng)畫將遵循?`forwards`?和?`backwards`?的規(guī)則，從而在兩個(gè)方向上擴(kuò)展動(dòng)畫屬性
????animation-fill-mode:?both;?
}

對(duì)于 animation-fill-mode 的解讀，我在 Segment Fault 上的一個(gè)問答中（SF - 如何理解 animation-fill-mode^[10]）看到了 4 副很好的解讀圖，這里借用一下：

假設(shè) HTML 如下：

<div?class="box">div>

CSS如下：

.box{
????transform:?translateY(0);
}
.box.on{
????animation:?move?1s;
}

@keyframes?move{
????from{transform:?translateY(-50px)}
????to??{transform:?translateY(?50px)}
}

使用圖片來表示 translateY 的值與 時(shí)間 的關(guān)系：

• 橫軸為表示 時(shí)間，為 0 時(shí)表示動(dòng)畫開始的時(shí)間，也就是向 box 加上 on 類名的時(shí)間，橫軸一格表示 0.5s
• 縱軸表示 translateY 的值，為 0 時(shí)表示 translateY 的值為 0，縱軸一格表示 50px

1. animation-fill-mode: none 表現(xiàn)如圖：

一句話總結(jié)，元素在動(dòng)畫時(shí)間之外，樣式只受到它的 CSS 規(guī)則限制，與 @keyframes 內(nèi)的關(guān)鍵幀定義無關(guān)。

2. animation-fill-mode: backwards 表現(xiàn)如圖：

一句話總結(jié)，元素在動(dòng)畫開始之前（包含未觸發(fā)動(dòng)畫階段及 animation-delay 期間）的樣式為動(dòng)畫運(yùn)行時(shí)的第一幀，而動(dòng)畫結(jié)束后的樣式則恢復(fù)為 CSS 規(guī)則設(shè)定的樣式。

3. animation-fill-mode: forwards 表現(xiàn)如圖：

一句話總結(jié)，元素在動(dòng)畫開始之前的樣式為 CSS 規(guī)則設(shè)定的樣式，而動(dòng)畫結(jié)束后的樣式則表現(xiàn)為由執(zhí)行期間遇到的最后一個(gè)關(guān)鍵幀計(jì)算值（也就是停在最后一幀）。

4. animation-fill-mode: both 表現(xiàn)如圖：

一句話總結(jié)，綜合了 animation-fill-mode: backwards 和 animation-fill-mode: forwards 的設(shè)定。動(dòng)畫開始前的樣式為動(dòng)畫運(yùn)行時(shí)的第一幀，動(dòng)畫結(jié)束后停在最后一幀。

animation-iteration-count/animation-direction 動(dòng)畫循環(huán)次數(shù)和方向

講到了 animation-fill-mode，我們就可以順帶講講這個(gè)兩個(gè)比較好理解的屬性 -- animation-iteration-count 和 animation-direction

• animation-iteration-count 控制動(dòng)畫運(yùn)行的次數(shù)，可以是數(shù)字或者 infinite，注意，數(shù)字可以是小數(shù)
• animation-direction 控制動(dòng)畫的方向，正向、反向、正向交替與反向交替

在上面講述 animation-fill-mode 時(shí)，我使用了動(dòng)畫運(yùn)行時(shí)的第一幀替代了@keyframes 中定義的第一幀這種說法，因?yàn)閯?dòng)畫運(yùn)行的第一幀和最后一幀的實(shí)際狀態(tài)還會(huì)受到動(dòng)畫運(yùn)行方向 animation-direction 和 animation-iteration-count 的影響。

在 CSS 動(dòng)畫中，由 animation-iteration-count 和 animation-direction 共同決定動(dòng)畫運(yùn)行時(shí)的第一幀和最后一幀的狀態(tài)。

1. 動(dòng)畫運(yùn)行的第一幀由 animation-direction 決定
2. 動(dòng)畫運(yùn)行的最后一幀由 animation-iteration-count 和 animation-direction 決定

動(dòng)畫的最后一幀，也就是動(dòng)畫運(yùn)行的最終狀態(tài)，并且我們可以利用 animation-fill-mode: forwards 讓動(dòng)畫在結(jié)束后停留在這一幀，這個(gè)還是比較好理解的，但是 animation-fill-mode: backwards 和 animation-direction 的關(guān)系很容易弄不清楚，這里簡(jiǎn)答講解下。

設(shè)置一個(gè) 100px x 100px 的滑塊，在一個(gè) 400px x 100px 的容器中，其代碼如下：

<div?class="g-father">
????<div?class="g-box">div>
div>

.g-father?{
????width:?400px;
????height:?100px;
????border:?1px?solid?#000;
}
.g-box?{
????width:?100px;
????height:?100px;
????background:?#333;
}

表現(xiàn)如下：

那么，加入 animation 之后，在不同的 animation-iteration-count 和 animation-direction 作用下，動(dòng)畫的初始和結(jié)束狀態(tài)都不一樣。

如果設(shè)置了 animation-fill-mode: backwards，則元素在動(dòng)畫未開始前的狀態(tài)由 animation-direction 決定：

.g-box?{
????...
????animation:?move?4s?linear;
????animation-play-state:?paused;
????transform:?translate(0,?0);
}
@keyframes?move?{
????0%?{
????????transform:?translate(100px,?0);
????}
????100%?{
????????transform:?translate(300px,?0);
????}
}

注意這里 CSS 規(guī)則中，元素沒有設(shè)置位移 transform: translate(0, 0)，而在動(dòng)畫中，第一個(gè)關(guān)鍵幀和最后一個(gè)關(guān)鍵的 translateX 分別是 100px、300px，配合不同的 animation-direction 初始狀態(tài)如下。

下圖假設(shè)我們?cè)O(shè)置了動(dòng)畫默認(rèn)是暫停的 -- animation-play-state: paused，那么動(dòng)畫在開始前的狀態(tài)為：

動(dòng)畫的分治與復(fù)用

講完了每一個(gè)屬性，我們?cè)賮砜纯匆恍﹦?dòng)畫使用過程中的細(xì)節(jié)。

看這樣一個(gè)動(dòng)畫：

<div>div>

div?{
????width:?100px;
????height:?100px;
????background:?#000;
????animation:?combine?2s;
}
@keyframes?combine?{
????100%?{
????????transform:?translate(0,?150px);
????????opacity:?0;
????}
}

這里我們實(shí)現(xiàn)了一個(gè) div 塊下落動(dòng)畫，下落的同時(shí)產(chǎn)生透明度的變化：

對(duì)于這樣一個(gè)多個(gè)屬性變化的動(dòng)畫，它其實(shí)等價(jià)于：

div?{
????animation:?falldown?2s,?fadeIn?2s;
}

@keyframes?falldown?{
????100%?{
????????transform:?translate(0,?150px);
????}
}
@keyframes?fadeIn?{
????100%?{
????????opacity:?0;
????}
}

在 CSS 動(dòng)畫規(guī)則中，animation 是可以接收多個(gè)動(dòng)畫的，這樣做的目的不僅僅只是為了復(fù)用，同時(shí)也是為了分治，我們對(duì)每一個(gè)屬性層面的動(dòng)畫能夠有著更為精確的控制。

keyframes 規(guī)則的設(shè)定

我們經(jīng)常能夠在各種不同的 CSS 代碼見到如下兩種 CSS @keyframes 的設(shè)定：

1. 使用百分比

@keyframes?fadeIn?{
????0%?{
????????opacity:?1;
????}
????100%?{
????????opacity:?0;
????}
}

2. 使用 from 及 to

@keyframes?fadeIn?{
????from?{
????????opacity:?1;
????}
????to?{
????????opacity:?0;
????}
}

在 CSS 動(dòng)畫 @keyframes 的定義中，from 等同于 0%，而 to 等同于 100%。

當(dāng)然，當(dāng)我們的關(guān)鍵幀不止 2 幀的時(shí)，更推薦使用百分比定義的方式。

除此之外，當(dāng)動(dòng)畫的起始幀等同于 CSS 規(guī)則中賦予的值并且沒有設(shè)定 animation-fill-mode，0% 和 from 這一幀是可以刪除的。

動(dòng)畫狀態(tài)的高優(yōu)先級(jí)性

我曾經(jīng)在這篇文章中 -- 深入理解 CSS（Cascading Style Sheets）中的層疊（Cascading）^[11] 講過一個(gè)很有意思的 CSS 現(xiàn)象。

這也是很多人對(duì) CSS 優(yōu)先級(jí)的一個(gè)認(rèn)知誤區(qū)，在 CSS 中，優(yōu)先級(jí)還需要考慮選擇器的層疊（級(jí)聯(lián)）順序。

只有在層疊順序相等時(shí)，使用哪個(gè)值才取決于樣式的優(yōu)先級(jí)。

那什么是層疊順序呢？

根據(jù) CSS Cascading 4 最新標(biāo)準(zhǔn)：

CSS Cascading and Inheritance Level 5(Current Work)^[12]

定義的當(dāng)前規(guī)范下申明的層疊順序優(yōu)先級(jí)如下（越往下的優(yōu)先級(jí)越高，下面的規(guī)則按升序排列）：

• Normal user agent declarations
• Normal user declarations
• Normal author declarations
• Animation declarations
• Important author declarations
• Important user declarations
• Important user agent declarations
• Transition declarations

簡(jiǎn)單翻譯一下：

按照上述算法，大概是這樣：

過渡動(dòng)畫過程中每一幀的樣式 > 用戶代理、用戶、頁面作者設(shè)置的!important樣式 > 動(dòng)畫過程中每一幀的樣式優(yōu)先級(jí) > 頁面作者、用戶、用戶代理普通樣式。

然而，經(jīng)過多個(gè)瀏覽器的測(cè)試，實(shí)際上并不是這樣。（尷尬了）

舉個(gè)例子，我們可以通過這個(gè)特性，覆蓋掉行內(nèi)樣式中的 !important 樣式：

<p?class="txt"?style="color:red!important">123456789p>

.txt?{
????animation:?colorGreen?2s?infinite;
}
@keyframes?colorGreen?{
????0%,
????100%?{
????????color:?green;
????}
}

在 Safari 瀏覽器下，上述 DEMO 文本的顏色為綠色，也就是說，處于動(dòng)畫狀態(tài)中的樣式，能夠覆蓋掉行內(nèi)樣式中的 !important 樣式，屬于最最高優(yōu)先級(jí)的一種樣式，我們可以通過無限動(dòng)畫、或者 animation-fill-mode: forwards，利用這個(gè)技巧，覆蓋掉本來應(yīng)該是優(yōu)先級(jí)非常非常高的行內(nèi)樣式中的 !important 樣式。

我在早兩年的 Chrome 中也能得到同樣的結(jié)果，但是到今天（2022-01-10），最新版的 Chrome 已經(jīng)不支持動(dòng)畫過程中關(guān)鍵幀樣式優(yōu)先級(jí)覆蓋行內(nèi)樣式 !important 的特性。

對(duì)于不同瀏覽器，感興趣的同學(xué)可以利用我這個(gè) DEMO 自行嘗試，CodePen Demo - the priority of CSS Animation^[13]

CSS 動(dòng)畫的優(yōu)化

這也是非常多人非常關(guān)心的一個(gè)重點(diǎn)。

我的 CSS 動(dòng)畫很卡，我應(yīng)該如何去優(yōu)化它？

動(dòng)畫元素生成獨(dú)立的 GraphicsLayer，強(qiáng)制開始 GPU 加速

CSS 動(dòng)畫很卡，其實(shí)是一個(gè)現(xiàn)象描述，它的本質(zhì)其實(shí)是在動(dòng)畫過程中，瀏覽器刷新渲染頁面的幀率過低。通常而言，目前大多數(shù)瀏覽器刷新率為 60 次/秒，所以通常來講 FPS 為 60 frame/s 時(shí)動(dòng)畫效果較好，也就是每幀的消耗時(shí)間為 16.67ms。

頁面處于動(dòng)畫變化時(shí)，當(dāng)幀率低于一定數(shù)值時(shí)，我們就感覺到頁面的卡頓。

而造成幀率低的原因就是瀏覽器在一幀之間處理的事情太多了，超過了 16.67ms，要優(yōu)化每一幀的時(shí)間，又需要完整地知道瀏覽器在每一幀干了什么，這個(gè)就又涉及到了老生常談的瀏覽器渲染頁面。

到今天，雖然不同瀏覽器的渲染過程不完全相同，但是基本上大同小異，基本上都是：

簡(jiǎn)化一下也就是這個(gè)圖：

這兩張圖，你可以在非常多不同的文章中看到。

回歸本文的重點(diǎn)，Web 動(dòng)畫很大一部分開銷在于層的重繪，以層為基礎(chǔ)的復(fù)合模型對(duì)渲染性能有著深遠(yuǎn)的影響。當(dāng)不需要繪制時(shí)，復(fù)合操作的開銷可以忽略不計(jì)，因此在試著調(diào)試渲染性能問題時(shí)，首要目標(biāo)就是要避免層的重繪。那么這就給動(dòng)畫的性能優(yōu)化提供了方向，減少元素的重繪與回流。

這其中，如何減少頁面的回流與重繪呢，這里就會(huì)運(yùn)用到我們常說的** GPU 加速**。

GPU 加速的本質(zhì)其實(shí)是減少瀏覽器渲染頁面每一幀過程中的 reflow 和 repaint，其根本，就是讓需要進(jìn)行動(dòng)畫的元素，生成自己的 GraphicsLayer。

瀏覽器渲染一個(gè)頁面時(shí)，它使用了許多沒有暴露給開發(fā)者的中間表現(xiàn)形式，其中最重要的結(jié)構(gòu)便是層(layer)。

在 Chrome 中，存在有不同類型的層：RenderLayer(負(fù)責(zé) DOM 子樹)，GraphicsLayer(負(fù)責(zé) RenderLayer 的子樹)。

GraphicsLayer ，它對(duì)于我們的 Web 動(dòng)畫而言非常重要，通常，Chrome 會(huì)將一個(gè)層的內(nèi)容在作為紋理上傳到 GPU 前先繪制(paint)進(jìn)一個(gè)位圖中。如果內(nèi)容不會(huì)改變，那么就沒有必要重繪(repaint)層。

而當(dāng)元素生成了自己的 GraphicsLayer 之后，在動(dòng)畫過程中，Chrome 并不會(huì)始終重繪整個(gè)層，它會(huì)嘗試智能地去重繪 DOM 中失效的部分，也就是發(fā)生動(dòng)畫的部分，在 Composite 之前，頁面是處于一種分層狀態(tài)，借助 GPU，瀏覽器僅僅在每一幀對(duì)生成了自己獨(dú)立 GraphicsLayer 元素層進(jìn)行重繪，如此，大大的降低了整個(gè)頁面重排重繪的開銷，提升了頁面渲染的效率。

因此，CSS 動(dòng)畫（Web 動(dòng)畫同理）優(yōu)化的第一條準(zhǔn)則就是讓需要?jiǎng)赢嫷脑厣闪俗约邯?dú)立的 GraphicsLayer，強(qiáng)制開始 GPU 加速，而我們需要知道是，GPU 加速的本質(zhì)是利用讓元素生成了自己獨(dú)立的 GraphicsLayer，降低了頁面在渲染過程中重繪重排的開銷。

當(dāng)然，生成自己的獨(dú)立的 GraphicsLayer，不僅僅只有 transform3d api，還有非常多的方式。在 CSS 中，包括但不限于（找了很多文檔，沒有很全面的，需要一個(gè)一個(gè)去嘗試，通過開啟 Chrome 的 Layer border 選項(xiàng)）：

• 3D 或透視變換(perspective、transform) CSS 屬性

• 使用加速視頻解碼的

• 擁有 3D (WebGL) 上下文或加速的 2D 上下文的 元素

• 混合插件(如 Flash)

• 對(duì)自己的 opacity 做 CSS 動(dòng)畫或使用一個(gè)動(dòng)畫變換的元素

• 擁有加速 CSS 過濾器的元素

• 元素有一個(gè)包含復(fù)合層的后代節(jié)點(diǎn)(換句話說，就是一個(gè)元素?fù)碛幸粋€(gè)子元素，該子元素在自己的層里)

• 元素有一個(gè) z-index 較低且包含一個(gè)復(fù)合層的兄弟元素(換句話說就是該元素在復(fù)合層上面渲染)

對(duì)于上述一大段非常繞的內(nèi)容，你可以再看看這幾篇文章：

• 【W(wǎng)eb動(dòng)畫】CSS3 3D 行星運(yùn)轉(zhuǎn) && 瀏覽器渲染原理^[14]
• Accelerated Rendering in Chrome^[15]

除了上述準(zhǔn)則之外，還有一些提升 CSS 動(dòng)畫性能的建議：

減少使用耗性能樣式

不同樣式在消耗性能方面是不同的，改變一些屬性的開銷比改變其他屬性要多，因此更可能使動(dòng)畫卡頓。

例如，與改變?cè)氐奈谋绢伾啾?，改變?cè)氐?box-shadow 將需要開銷大很多的繪圖操作。box-shadow 屬性，從渲染角度來講十分耗性能，原因就是與其他樣式相比，它們的繪制代碼執(zhí)行時(shí)間過長(zhǎng)。這就是說，如果一個(gè)耗性能嚴(yán)重的樣式經(jīng)常需要重繪，那么你就會(huì)遇到性能問題。

類似的還有 CSS 3D 變換、mix-blend-mode、filter，這些樣式相比其他一些簡(jiǎn)單的操作，會(huì)更加的消耗性能。我們應(yīng)該盡可能的在動(dòng)畫過程中降低其使用的頻率或者尋找替代方案。

當(dāng)然，沒有不變的事情，在今天性能很差的樣式，可能明天就被優(yōu)化，并且瀏覽器之間也存在差異。

因此關(guān)鍵在于，我們需要針對(duì)每一起卡頓的例子，借助開發(fā)工具來分辨出性能瓶頸所在，然后設(shè)法減少瀏覽器的工作量。學(xué)會(huì) Chrome 開發(fā)者工具的 Performance 面板及其他渲染相關(guān)的面板非常重要，當(dāng)然這不是本文的重點(diǎn)。大家可以自行探索。

使用 will-change 提高頁面滾動(dòng)、動(dòng)畫等渲染性能

will-change 為 Web 開發(fā)者提供了一種告知瀏覽器該元素會(huì)有哪些變化的方法，這樣瀏覽器可以在元素屬性真正發(fā)生變化之前提前做好對(duì)應(yīng)的優(yōu)化準(zhǔn)備工作。這種優(yōu)化可以將一部分復(fù)雜的計(jì)算工作提前準(zhǔn)備好，使頁面的反應(yīng)更為快速靈敏。

值得注意的是，用好這個(gè)屬性并不是很容易：

• 不要將 will-change 應(yīng)用到太多元素上：瀏覽器已經(jīng)盡力嘗試去優(yōu)化一切可以優(yōu)化的東西了。有一些更強(qiáng)力的優(yōu)化，如果與 will-change 結(jié)合在一起的話，有可能會(huì)消耗很多機(jī)器資源，如果過度使用的話，可能導(dǎo)致頁面響應(yīng)緩慢或者消耗非常多的資源。

• 有節(jié)制地使用：通常，當(dāng)元素恢復(fù)到初始狀態(tài)時(shí)，瀏覽器會(huì)丟棄掉之前做的優(yōu)化工作。但是如果直接在樣式表中顯式聲明了 will-change 屬性，則表示目標(biāo)元素可能會(huì)經(jīng)常變化，瀏覽器會(huì)將優(yōu)化工作保存得比之前更久。所以最佳實(shí)踐是當(dāng)元素變化之前和之后通過腳本來切換 will-change 的值。

• 不要過早應(yīng)用 will-change 優(yōu)化：如果你的頁面在性能方面沒什么問題，則不要添加 will-change 屬性來榨取一丁點(diǎn)的速度。will-change 的設(shè)計(jì)初衷是作為最后的優(yōu)化手段，用來嘗試解決現(xiàn)有的性能問題。它不應(yīng)該被用來預(yù)防性能問題。過度使用 will-change 會(huì)導(dǎo)致大量的內(nèi)存占用，并會(huì)導(dǎo)致更復(fù)雜的渲染過程，因?yàn)闉g覽器會(huì)試圖準(zhǔn)備可能存在的變化過程。這會(huì)導(dǎo)致更嚴(yán)重的性能問題。

• 給它足夠的工作時(shí)間：這個(gè)屬性是用來讓頁面開發(fā)者告知瀏覽器哪些屬性可能會(huì)變化的。然后瀏覽器可以選擇在變化發(fā)生前提前去做一些優(yōu)化工作。所以給瀏覽器一點(diǎn)時(shí)間去真正做這些優(yōu)化工作是非常重要的。使用時(shí)需要嘗試去找到一些方法提前一定時(shí)間獲知元素可能發(fā)生的變化，然后為它加上 will-change 屬性。

有人說 will-change 是良藥，也有人說是毒藥，在具體使用的時(shí)候，可以多測(cè)試一下。

最后

好了，本文從多個(gè)方面，由淺入深地描述了 CSS 動(dòng)畫我認(rèn)為的一些比較重要、值得一講、需要注意的點(diǎn)。當(dāng)然很多地方點(diǎn)到即止，或者限于篇幅沒有完全展開，很多細(xì)節(jié)還需要讀者進(jìn)一步閱讀規(guī)范或者自行嘗試驗(yàn)證，實(shí)踐出真知，紙上得來終覺淺。

OK，本文到此結(jié)束，希望本文對(duì)你有所幫助 :)

參考資料