摘要：然而我發現都年了，還有很多同學不會動畫。指定動畫計時函數，即動畫的速度曲線，默認是。指定動畫播放狀態，正在運行或暫停。除了默認值外，還有另外個值，表示，動畫完成后，元素狀態保持為最后一幀的狀態。

今年我面試了很多同學，只要看到簡歷上寫“熟練掌握CSS3”的，我都會問問動畫相關知識。然而我發現：都

2019 年了，還有很多同學不會

CSS 動畫。

我經常愛問的一個問題是，實現如下的效果：

即，一個小球從向右勻速移動

200px，然后移動回來，再移動過去，最后停留在

200px 處。

動圖效果如下：

就是需求這么簡單的一個動畫，然而絕大多數人卻不能答對。

不賣關子，我的答案是：

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);
  }
}

大部分面試者說，關于

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

這里，我準備為對

CSS 動畫掌握不深的小伙伴補充一下相關知識。歡迎大佬們拍板。

正文開始。

通過開發者工具可以發現，

animation（動畫）屬性是 8 個屬性的簡寫。

這 8 個屬性具體含義如下：

下面我們一個個仔細說明，各個動畫屬性都是用來做什么的，以及需要注意的地方。

CSS 動畫，也稱關鍵幀動畫。通過

@keyframes 來定義關鍵幀。

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

CSS  動畫也是利用這個原理。不過開發者不需要給出每一幀的定義。只需要定義一些關鍵的幀即可。因為其余的幀，瀏覽器會根據計時函數插值計算出來。

比如我們一個

div 旋轉一圈，只需要定義開始和結束兩幀即可：

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

其中，

rotate 是我給這個動畫起的名字，

from 表示最開始的那一幀，

to 表示結束時的那一幀。

準確地說，

CSS 動畫用百分比來刻畫一個動畫周期，

from 其實是

0% 的別稱，

to 是

100% 的別稱。因此關鍵幀

rotate 等價于：

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

定義好了關鍵幀后，下來就可以直接用它了：

animation: rotate 2s;

或者：

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

通過

animation-name 來指定動畫使用的關鍵幀，這個是必須的。用

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

另外上述代碼還指定了動畫運行的時間

animation-duration 為

2s。最后運行效果如下：

動圖的效果不是太明顯，方塊在旋轉時，不是勻速的。因為此時刻畫動畫速度的屬性

animation-timing-function 默認值是

ease，即先快后慢。

下面動圖演示了計時函數屬性一些值的情形：

animation-timing-function 常見值有：

linear、

ease、

ease-in、

ease-out、

ease-in-out。這些值其實都是

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

canvas 里也有相應的

API?？梢哉归_的點其實比較多，這里只是初步介紹。

需要提一下，計時函數屬性另外的一個好玩的值是

steps 函數，可以用來實現逐幀動畫：

計時函數屬性介紹到此，后面一律使用值

linear，即表示勻速動畫。

回到關鍵幀，我們除了指定開頭和結束位置的關鍵幀（如果不指定

0% 和

100%，瀏覽器會自動推斷），當然也可以指定任意百分比的幀是什么情況，比如開篇例子的另一種實現：

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);
  }
}

關鍵幀代碼有冗余，可以進一步簡寫：

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

此時，動畫時長改成了

6s，動畫進行到三分之一處時，讓

div 位于

200px，三分之二回到開始位置，結束時移動到

200px 處。

這種是比較直觀的實現方式，有很多面試者一般都會想到這種。

注意

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

both。它是屬性

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

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

@keyframes 只是定義了動畫過程中每一幀的值，然而在動畫開始前和動畫結束后，元素改處于什么狀態呢？

animation-fill-mode 說的就是這個事情。除了默認值

none 外，還有另外 3 個值：

• forwards，表示，動畫完成后，元素狀態保持為最后一幀的狀態。

• backwards，表示，有動畫延遲時，動畫開始前，元素狀態保持為第一幀的狀態。

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

  舉個例子，

  div 從

  100px 處移動到

  200px 處的關鍵幀定義為：

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

  設置填充模式為

  forwards 時，動畫最后停留在

  200px 處：

  設置動畫延遲

  1s 后執行，且填充模式為

  backwards 時，可以看到動畫在開始前是處于

  100px 處，動畫結束后回到

  0px 處：

  最后設置填充模式為

  both 的情形：

  動畫結束后，保持動畫最后一幀的狀態，這個太有用了，比如我們可以實現一個進度條：

  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 設置延遲時間。不為大家注意的是，延遲可以為負數。負延遲表示動畫仿佛開始前就已經運行過了那么長時間。

  拿上述進度條為例子，原動畫用了

  2s 是從

  0% 加載到

  100% 的。如果設置延遲為

  -1s。這動畫會從

  50% 加載到

  100%。仿佛已經運行了

  1s 一樣：

  CSS 動畫是可以暫停的。屬性

  animation-play-state 表示動畫播放狀態，默認值

  running 表示播放，

  paused 表示暫停：

  animation-play-state 這個屬性非常好用，它可以與負延遲一起實現特殊的效果，比如進度條插件：

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

  animation-iteration-count 表示動畫播放次數。它很好懂，只有一點要注意，無限播放時使用

  infinite。另一個是播放方向

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

  @keyframes 定義的關鍵幀。其值有：

  • normal 默認值。

  • reverse 表示動畫反向播放。

  • alternate 表示正向和反向交叉進行。

  • alternate-reverse 表示反向和正向交叉進行。

    示意如下：

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

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