摘要：然而我發(fā)現(xiàn)都年了，還有很多同學(xué)不會(huì)動(dòng)畫。指定動(dòng)畫計(jì)時(shí)函數(shù)，即動(dòng)畫的速度曲線，默認(rèn)是。指定動(dòng)畫播放狀態(tài)，正在運(yùn)行或暫停。除了默認(rèn)值外，還有另外個(gè)值，表示，動(dòng)畫完成后，元素狀態(tài)保持為最后一幀的狀態(tài)。

今年我面試了很多同學(xué)，只要看到簡歷上寫“熟練掌握CSS3”的，我都會(huì)問問動(dòng)畫相關(guān)知識(shí)。然而我發(fā)現(xiàn)：都

2019 年了，還有很多同學(xué)不會(huì)

CSS 動(dòng)畫。

我經(jīng)常愛問的一個(gè)問題是，實(shí)現(xiàn)如下的效果：

即，一個(gè)小球從向右勻速移動(dòng)

200px，然后移動(dòng)回來，再移動(dòng)過去，最后停留在

200px 處。

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

就是需求這么簡單的一個(gè)動(dòng)畫，然而絕大多數(shù)人卻不能答對(duì)。

不賣關(guān)子，我的答案是：

div{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0ff;
  animation: move 2s linear 3 alternate both;
}
@keyframes move{
  0%{
    transform: translate(0,0);
  }
  100%{
    transform: translate(200px,0);
  }
}

大部分面試者說，關(guān)于

CSS 動(dòng)畫，也看過一些教程，工作中卻不怎么使用，因此就忘了。

這里，我準(zhǔn)備為對(duì)

CSS 動(dòng)畫掌握不深的小伙伴補(bǔ)充一下相關(guān)知識(shí)。歡迎大佬們拍板。

正文開始。

通過開發(fā)者工具可以發(fā)現(xiàn)，

animation（動(dòng)畫）屬性是 8 個(gè)屬性的簡寫。

這 8 個(gè)屬性具體含義如下：

下面我們一個(gè)個(gè)仔細(xì)說明，各個(gè)動(dòng)畫屬性都是用來做什么的，以及需要注意的地方。

CSS 動(dòng)畫，也稱關(guān)鍵幀動(dòng)畫。通過

@keyframes 來定義關(guān)鍵幀。

幀的概念，想必大家很清楚，比如電影就是一幀幀圖片在播放，利用圖像在人腦中短時(shí)間停留來形成動(dòng)態(tài)效果。

CSS  動(dòng)畫也是利用這個(gè)原理。不過開發(fā)者不需要給出每一幀的定義。只需要定義一些關(guān)鍵的幀即可。因?yàn)槠溆嗟膸?，瀏覽器會(huì)根據(jù)計(jì)時(shí)函數(shù)插值計(jì)算出來。

比如我們一個(gè)

div 旋轉(zhuǎn)一圈，只需要定義開始和結(jié)束兩幀即可：

@keyframes rotate{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

其中，

rotate 是我給這個(gè)動(dòng)畫起的名字，

from 表示最開始的那一幀，

to 表示結(jié)束時(shí)的那一幀。

準(zhǔn)確地說，

CSS 動(dòng)畫用百分比來刻畫一個(gè)動(dòng)畫周期，

from 其實(shí)是

0% 的別稱，

to 是

100% 的別稱。因此關(guān)鍵幀

rotate 等價(jià)于：

@keyframes rotate{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

定義好了關(guān)鍵幀后，下來就可以直接用它了：

animation: rotate 2s;

或者：

animation-name: rotate;
animation-duration: 2s;

通過

animation-name 來指定動(dòng)畫使用的關(guān)鍵幀，這個(gè)是必須的。用

JS 來理解的話，相當(dāng)于：只有變量聲明是不行的，還需要使用。

另外上述代碼還指定了動(dòng)畫運(yùn)行的時(shí)間

animation-duration 為

2s。最后運(yùn)行效果如下：

動(dòng)圖的效果不是太明顯，方塊在旋轉(zhuǎn)時(shí)，不是勻速的。因?yàn)榇藭r(shí)刻畫動(dòng)畫速度的屬性

animation-timing-function 默認(rèn)值是

ease，即先快后慢。

下面動(dòng)圖演示了計(jì)時(shí)函數(shù)屬性一些值的情形：

animation-timing-function 常見值有：

linear、

ease、

ease-in、

ease-out、

ease-in-out。這些值其實(shí)都是

cubic-bezier(n,n,n,n) 的特例。它們被稱為貝塞爾曲線。除了開發(fā)者工具外，《CSS揭秘》作者也寫了的一個(gè)在線調(diào)試貝塞爾曲線的網(wǎng)站：cubic-bezier.com。貝塞爾曲線這個(gè)知識(shí)點(diǎn)很有用，

canvas 里也有相應(yīng)的

API。可以展開的點(diǎn)其實(shí)比較多，這里只是初步介紹。

需要提一下，計(jì)時(shí)函數(shù)屬性另外的一個(gè)好玩的值是

steps 函數(shù)，可以用來實(shí)現(xiàn)逐幀動(dòng)畫：

計(jì)時(shí)函數(shù)屬性介紹到此，后面一律使用值

linear，即表示勻速動(dòng)畫。

回到關(guān)鍵幀，我們除了指定開頭和結(jié)束位置的關(guān)鍵幀（如果不指定

0% 和

100%，瀏覽器會(huì)自動(dòng)推斷），當(dāng)然也可以指定任意百分比的幀是什么情況，比如開篇例子的另一種實(shí)現(xiàn)：

div{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0ff;
  animation: move 6s linear both;
}
@keyframes move{
  0%{
    transform: translate(0,0);
  }
  33%{
    transform: translate(200px,0);
  }
  66%{
    transform: translate(0,0);
  }
  100%{
    transform: translate(200px,0);
  }
}

關(guān)鍵幀代碼有冗余，可以進(jìn)一步簡寫：

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

此時(shí)，動(dòng)畫時(shí)長改成了

6s，動(dòng)畫進(jìn)行到三分之一處時(shí)，讓

div 位于

200px，三分之二回到開始位置，結(jié)束時(shí)移動(dòng)到

200px 處。

這種是比較直觀的實(shí)現(xiàn)方式，有很多面試者一般都會(huì)想到這種。

注意

animation: move 6s linear both; 聲明中的

both。它是屬性

animation-fill-mode 的一個(gè)值。這個(gè)屬性容易被忽略，然而卻是

CSS 動(dòng)畫比較重要的一個(gè)屬性。直譯為動(dòng)畫填充模式，具體說的是什么事情呢？

@keyframes 只是定義了動(dòng)畫過程中每一幀的值，然而在動(dòng)畫開始前和動(dòng)畫結(jié)束后，元素改處于什么狀態(tài)呢？

animation-fill-mode 說的就是這個(gè)事情。除了默認(rèn)值

none 外，還有另外 3 個(gè)值：

• forwards，表示，動(dòng)畫完成后，元素狀態(tài)保持為最后一幀的狀態(tài)。

• backwards，表示，有動(dòng)畫延遲時(shí)，動(dòng)畫開始前，元素狀態(tài)保持為第一幀的狀態(tài)。

• both，表示上述二者效果都有。

  舉個(gè)例子，

  div 從

  100px 處移動(dòng)到

  200px 處的關(guān)鍵幀定義為：

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

  設(shè)置填充模式為

  forwards 時(shí)，動(dòng)畫最后停留在

  200px 處：

  設(shè)置動(dòng)畫延遲

  1s 后執(zhí)行，且填充模式為

  backwards 時(shí)，可以看到動(dòng)畫在開始前是處于

  100px 處，動(dòng)畫結(jié)束后回到

  0px 處：

  最后設(shè)置填充模式為

  both 的情形：

  動(dòng)畫結(jié)束后，保持動(dòng)畫最后一幀的狀態(tài)，這個(gè)太有用了，比如我們可以實(shí)現(xiàn)一個(gè)進(jìn)度條：

  div{
    height: 10px;
    border: 1px solid;
    background: linear-gradient(#0ff,#0ff);
    background-repeat: no-repeat;
    background-size: 0;
    animation: move 2s linear forwards;
  }
  @keyframes move{
    100%{
      background-size: 100%;
    }
  }
  

  效果如下：
  

  上面提到了可以使用

  animation-delay 設(shè)置延遲時(shí)間。不為大家注意的是，延遲可以為負(fù)數(shù)。負(fù)延遲表示動(dòng)畫仿佛開始前就已經(jīng)運(yùn)行過了那么長時(shí)間。

  拿上述進(jìn)度條為例子，原動(dòng)畫用了

  2s 是從

  0% 加載到

  100% 的。如果設(shè)置延遲為

  -1s。這動(dòng)畫會(huì)從

  50% 加載到

  100%。仿佛已經(jīng)運(yùn)行了

  1s 一樣：

  CSS 動(dòng)畫是可以暫停的。屬性

  animation-play-state 表示動(dòng)畫播放狀態(tài)，默認(rèn)值

  running 表示播放，

  paused 表示暫停：

  animation-play-state 這個(gè)屬性非常好用，它可以與負(fù)延遲一起實(shí)現(xiàn)特殊的效果，比如進(jìn)度條插件：

  目前為止還有兩個(gè)屬性沒有介紹，一個(gè)是

  animation-iteration-count 表示動(dòng)畫播放次數(shù)。它很好懂，只有一點(diǎn)要注意，無限播放時(shí)使用

  infinite。另一個(gè)是播放方向

  animation-direction，它的意思說指定動(dòng)畫按照指定順序來播放

  @keyframes 定義的關(guān)鍵幀。其值有：

  • normal 默認(rèn)值。

  • reverse 表示動(dòng)畫反向播放。

  • alternate 表示正向和反向交叉進(jìn)行。

  • alternate-reverse 表示反向和正向交叉進(jìn)行。

    示意如下：

    animation 屬性以及 8 個(gè)子屬性介紹完了，另外需要說明的是它們與

    background 及其各子屬性一樣，是支持多個(gè)值的，即在同一個(gè)元素上應(yīng)用多個(gè)動(dòng)畫，送給大家一個(gè)如意金箍棒：