作者：chokcoco
來源：SegmentFault 思否社區(qū)
本文將比較全面細(xì)致的梳理一下 CSS 動(dòng)畫的方方面面，針對(duì)每個(gè)屬性用法的講解及進(jìn)階用法的示意，希望能成為一個(gè)比較好的從入門到進(jìn)階的教程。
CSS 動(dòng)畫介紹及語(yǔ)法
首先，我們來簡(jiǎn)單介紹一下 CSS 動(dòng)畫。
最新版本的 CSS 動(dòng)畫由規(guī)范 -- CSS Animations Level 1 定義。
https://www.w3.org/TR/2018/WD-css-animations-1-20181011/
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;
}
}
animation: move 1s 部分就是動(dòng)畫的第一部分，用于描述動(dòng)畫的各個(gè)規(guī)則;
@keyframes move {} 部分就是動(dòng)畫的第二部分，用于指定動(dòng)畫開始、結(jié)束以及中間點(diǎn)樣式的關(guān)鍵幀;
一個(gè) CSS 動(dòng)畫一定要由上述兩部分組成。
CSS 動(dòng)畫的語(yǔ)法
接下來，我們簡(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-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í)間。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)畫效果：初始 3 個(gè)球的位置就是間隔 120°，同時(shí)開始旋轉(zhuǎn)，但是這樣代碼量會(huì)稍微多一點(diǎn)
另外一種思路，同一個(gè)動(dòng)畫，3 個(gè)元素的其中兩個(gè)延遲整個(gè)動(dòng)畫的 1/3，2/3 時(shí)間出發(fā)
.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è)動(dòng)畫，我們利用一定范圍內(nèi)隨機(jī)的 animation-duration 和一定范圍內(nèi)隨機(jī)的 animation-delay，可以有效的構(gòu)建更為隨機(jī)的動(dòng)畫效果，讓動(dòng)畫更加的自然。我在下述兩個(gè)純 CSS 動(dòng)畫中，都使用了這樣的技巧：
純 CSS 實(shí)現(xiàn)華為充電動(dòng)畫預(yù)覽：https://codepen.io/Chokcoco/pen/vYExwvm
純 CSS 實(shí)現(xiàn)火焰動(dòng)畫：https://codepen.io/Chokcoco/pen/jJJbmz以純 CSS 實(shí)現(xiàn)華為充電動(dòng)畫為例子，簡(jiǎn)單講解一下。仔細(xì)觀察這一部分，上升的一個(gè)一個(gè)圓球，拋去這里的一些融合效果，只關(guān)注不斷上升的圓球，看著像是沒有什么規(guī)律可言：我們來模擬一下，如果是使用 10 個(gè) animation-duration 和 animation-delay 都一致的圓的話，核心偽代碼：<ul>
<li></li>
<!--共 10 個(gè)...-->
<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)畫效果預(yù)覽：https://codepen.io/Chokcoco/pen/JjyRYyR
animation-timing-function 緩動(dòng)函數(shù)
緩動(dòng)函數(shù)在動(dòng)畫中非常重要，它定義了動(dòng)畫在每一動(dòng)畫周期中執(zhí)行的節(jié)奏。
cubic-bezier-timing-function 三次貝塞爾曲線緩動(dòng)函數(shù)
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)畫從頭到尾的速度是相同的
除了 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 用于創(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)不同效果不同，預(yù)覽鏈接：https://codepen.io/Chokcoco/pen/JjyxLMY對(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)單：.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 段：我們?cè)O(shè)定了一個(gè)大小都為 256px 的 div，給這個(gè) div 賦予了一個(gè) animation: sprite .6s steps(6) infinite 動(dòng)畫；
其中 steps(6) 的意思就是將設(shè)定的 @keyframes 動(dòng)畫分為 6 次（6幀）執(zhí)行，而整體的動(dòng)畫時(shí)間是 0.6s，所以每一幀的停頓時(shí)長(zhǎng)為 0.1s；
動(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() 完整代碼鏈接：https://codepen.io/Chokcoco/pen/JjrBqJZ
animation-duration 動(dòng)畫長(zhǎng)短對(duì)動(dòng)畫的影響
在這里再插入一個(gè)小章節(jié)，animation-duration 動(dòng)畫長(zhǎng)短對(duì)動(dòng)畫的影響也是非常明顯的。在上述代碼的基礎(chǔ)上，我們?cè)傩薷?nbsp;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);
}
}
但是如果這里，我們將補(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);
}
}
整個(gè) loading 的圈圈看上去好像也在旋轉(zhuǎn)，實(shí)際上只是 20 幀關(guān)鍵幀在切換，整體的效果感覺更適合 Loading 的效果。因此，兩種動(dòng)畫效果都是很有必要掌握的，在實(shí)際使用的時(shí)候靈活嘗試，選擇更適合的。上述 DEMO 效果完整的代碼：CodePen Demo -- Scale Loading steps vs linear 鏈接：https://codepen.io/Chokcoco/pen/oNGMROO
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">stop</div>
<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，讓酒倒下，利用 animation-play-state 實(shí)現(xiàn)了一個(gè)非常有意思的交互效果：完整的 DEMO ：CodePen Demo -- CSS Beer! 鏈接：https://codepen.io/mikegolus/pen/jJzRwJ在非常多 Web 創(chuàng)意交互動(dòng)畫我們都可以看到這個(gè)技巧的身影。頁(yè)面 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)行；
動(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）看到了 4 副很好的解讀圖，這里借用一下：.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
一句話總結(jié)，元素在動(dòng)畫時(shí)間之外，樣式只受到它的 CSS 規(guī)則限制，與 @keyframes 內(nèi)的關(guān)鍵幀定義無關(guān)。一句話總結(jié)，元素在動(dòng)畫開始之前（包含未觸發(fā)動(dòng)畫階段及 animation-delay 期間）的樣式為動(dòng)畫運(yùn)行時(shí)的第一幀，而動(dòng)畫結(jié)束后的樣式則恢復(fù)為 CSS 規(guī)則設(shè)定的樣式。一句話總結(jié)，元素在動(dòng)畫開始之前的樣式為 CSS 規(guī)則設(shè)定的樣式，而動(dòng)畫結(jié)束后的樣式則表現(xiàn)為由執(zhí)行期間遇到的最后一個(gè)關(guān)鍵幀計(jì)算值（也就是停在最后一幀）。一句話總結(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-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)。動(dòng)畫運(yùn)行的第一幀由 animation-direction 決定
動(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;
}
那么，加入 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é)。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è)定：@keyframes fadeIn {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@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） 講過一個(gè)很有意思的 CSS 現(xiàn)象。文章鏈接：https://github.com/chokcoco/iCSS/issues/76這也是很多人對(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) 鏈接：https://www.w3.org/TR/css-cascade-5/#cascade-sort定義的當(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
過渡動(dòng)畫過程中每一幀的樣式 > 用戶代理、用戶、頁(yè)面作者設(shè)置的!important樣式 > 動(dòng)畫過程中每一幀的樣式優(yōu)先級(jí) > 頁(yè)面作者、用戶、用戶代理普通樣式。然而，經(jīng)過多個(gè)瀏覽器的測(cè)試，實(shí)際上并不是這樣。（尷尬了）舉個(gè)例子，我們可以通過這個(gè)特性，覆蓋掉行內(nèi)樣式中的 !important 樣式：<p class="txt" style="color:red!important">123456789</p>
.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 預(yù)覽：https://codepen.io/Chokcoco/pen/PowaXjMCSS 動(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)畫過程中，瀏覽器刷新渲染頁(yè)面的幀率過低。通常而言，目前大多數(shù)瀏覽器刷新率為 60 次/秒，所以通常來講 FPS 為 60 frame/s 時(shí)動(dòng)畫效果較好，也就是每幀的消耗時(shí)間為 16.67ms。頁(yè)面處于動(dòng)畫變化時(shí)，當(dāng)幀率低于一定數(shù)值時(shí)，我們就感覺到頁(yè)面的卡頓。而造成幀率低的原因就是瀏覽器在一幀之間處理的事情太多了，超過了 16.67ms，要優(yōu)化每一幀的時(shí)間，又需要完整地知道瀏覽器在每一幀干了什么，這個(gè)就又涉及到了老生常談的瀏覽器渲染頁(yè)面。到今天，雖然不同瀏覽器的渲染過程不完全相同，但是基本上大同小異，基本上都是：回歸本文的重點(diǎn)，Web 動(dòng)畫很大一部分開銷在于層的重繪，以層為基礎(chǔ)的復(fù)合模型對(duì)渲染性能有著深遠(yuǎn)的影響。當(dāng)不需要繪制時(shí)，復(fù)合操作的開銷可以忽略不計(jì)，因此在試著調(diào)試渲染性能問題時(shí)，首要目標(biāo)就是要避免層的重繪。那么這就給動(dòng)畫的性能優(yōu)化提供了方向，減少元素的重繪與回流。這其中，如何減少頁(yè)面的回流與重繪呢，這里就會(huì)運(yùn)用到我們常說的 GPU 加速。GPU 加速的本質(zhì)其實(shí)是減少瀏覽器渲染頁(yè)面每一幀過程中的 reflow 和 repaint，其根本，就是讓需要進(jìn)行動(dòng)畫的元素，生成自己的GraphicsLayer。瀏覽器渲染一個(gè)頁(yè)面時(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 之前，頁(yè)面是處于一種分層狀態(tài)，借助 GPU，瀏覽器僅僅在每一幀對(duì)生成了自己獨(dú)立 GraphicsLayer 元素層進(jìn)行重繪，如此，大大的降低了整個(gè)頁(yè)面重排重繪的開銷，提升了頁(yè)面渲染的效率。因此，CSS 動(dòng)畫（Web 動(dòng)畫同理）優(yōu)化的第一條準(zhǔn)則就是讓需要?jiǎng)赢嫷脑厣闪俗约邯?dú)立的 GraphicsLayer，強(qiáng)制開始 GPU 加速，而我們需要知道是，GPU 加速的本質(zhì)是利用讓元素生成了自己獨(dú)立的 GraphicsLayer，降低了頁(yè)面在渲染過程中重繪重排的開銷。當(dāng)然，生成自己的獨(dú)立的 GraphicsLayer，不僅僅只有 transform3d api，還有非常多的方式。在 CSS 中，包括但不限于（找了很多文檔，沒有很全面的，需要一個(gè)一個(gè)去嘗試，通過開啟 Chrome 的 Layer border 選項(xiàng)）：3D 或透視變換(perspective、transform) CSS 屬性
使用加速視頻解碼的 <video> 元素
擁有 3D (WebGL) 上下文或加速的 2D 上下文的 <canvas> 元素
混合插件(如 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) && 瀏覽器渲染原理https://www.cnblogs.com/coco1s/p/5439619.html
- Accelerated Rendering in Chromehttps://www.html5rocks.com/zh/tutorials/speed/layers/#disqus_thread
除了上述準(zhǔn)則之外，還有一些提升 CSS 動(dòng)畫性能的建議：減少使用耗性能樣式
不同樣式在消耗性能方面是不同的，改變一些屬性的開銷比改變其他屬性要多，因此更可能使動(dòng)畫卡頓。例如，與改變?cè)氐奈谋绢伾啾?，改變?cè)氐?/span> 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 提高頁(yè)面滾動(dòng)、動(dòng)畫等渲染性能
will-change 為 Web 開發(fā)者提供了一種告知瀏覽器該元素會(huì)有哪些變化的方法，這樣瀏覽器可以在元素屬性真正發(fā)生變化之前提前做好對(duì)應(yīng)的優(yōu)化準(zhǔn)備工作。這種優(yōu)化可以將一部分復(fù)雜的計(jì)算工作提前準(zhǔn)備好，使頁(yè)面的反應(yīng)更為快速靈敏。不要將 will-change 應(yīng)用到太多元素上：瀏覽器已經(jīng)盡力嘗試去優(yōu)化一切可以優(yōu)化的東西了。有一些更強(qiáng)力的優(yōu)化，如果與 will-change 結(jié)合在一起的話，有可能會(huì)消耗很多機(jī)器資源，如果過度使用的話，可能導(dǎo)致頁(yè)面響應(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)化：如果你的頁(yè)面在性能方面沒什么問題，則不要添加 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è)屬性是用來讓頁(yè)面開發(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ì)你有所幫助 :)如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。
點(diǎn)擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開更多互動(dòng)和交流，掃描下方”二維碼“或在“公眾號(hào)后臺(tái)“回復(fù)“ 入群 ”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~
