資訊專欄INFORMATION COLUMN
摘要：然而我發(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é)，只要看到簡(jiǎn)歷上寫“熟練掌握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)回來(lái)，再移動(dòng)過(guò)去，最后停留在
200px 處。
動(dòng)圖效果如下：
就是需求這么簡(jiǎn)單的一個(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);
??}
}
大部分面試者說(shuō)，關(guān)于
CSS 動(dòng)畫，也看過(guò)一些教程，工作中卻不怎么使用，因此就忘了。
這里，我準(zhǔn)備為對(duì)
CSS 動(dòng)畫掌握不深的小伙伴補(bǔ)充一下相關(guān)知識(shí)。歡迎大佬們拍板。
正文開始。
通過(guò)開發(fā)者工具可以發(fā)現(xiàn)，
animation（動(dòng)畫）屬性是 8 個(gè)屬性的簡(jiǎn)寫。
這 8 個(gè)屬性具體含義如下：
| 屬性 | 描述 |
|---|---|
| animation-duration | 指定動(dòng)畫完成一個(gè)周期所需要時(shí)間，單位秒（s）或毫秒（ms），默認(rèn)是 0。 |
| animation-timing-function | 指定動(dòng)畫計(jì)時(shí)函數(shù)，即動(dòng)畫的速度曲線，默認(rèn)是 "ease"。 |
| animation-delay | 指定動(dòng)畫延遲時(shí)間，即動(dòng)畫何時(shí)開始，默認(rèn)是 0。 |
| animation-iteration-count | 指定動(dòng)畫播放的次數(shù)，默認(rèn)是 1。 |
| animation-direction | 指定動(dòng)畫播放的方向。默認(rèn)是 normal。 |
| animation-fill-mode | 指定動(dòng)畫填充模式。默認(rèn)是 none。 |
| animation-play-state | 指定動(dòng)畫播放狀態(tài)，正在運(yùn)行或暫停。默認(rèn)是 running。 |
| animation-name | 指定 @keyframes 動(dòng)畫的名稱。 |
下面我們一個(gè)個(gè)仔細(xì)說(shuō)明，各個(gè)動(dòng)畫屬性都是用來(lái)做什么的，以及需要注意的地方。
CSS 動(dòng)畫，也稱關(guān)鍵幀動(dòng)畫。通過(guò)
@keyframes 來(lái)定義關(guān)鍵幀。
幀的概念，想必大家很清楚，比如電影就是一幀幀圖片在播放，利用圖像在人腦中短時(shí)間停留來(lái)形成動(dòng)態(tài)效果。
CSS 動(dòng)畫也是利用這個(gè)原理。不過(guò)開發(fā)者不需要給出每一幀的定義。只需要定義一些關(guān)鍵的幀即可。因?yàn)槠溆嗟膸?，瀏覽器會(huì)根據(jù)計(jì)時(shí)函數(shù)插值計(jì)算出來(lái)。
比如我們一個(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)確地說(shuō)，
CSS 動(dòng)畫用百分比來(lái)刻畫一個(gè)動(dòng)畫周期，
from 其實(shí)是
0% 的別稱，
to 是
100% 的別稱。因此關(guān)鍵幀
rotate 等價(jià)于：
@keyframes?rotate{
??0%{
????transform:?rotate(0deg);
??}
??100%{
????transform:?rotate(360deg);
??}
}
定義好了關(guān)鍵幀后，下來(lái)就可以直接用它了：
animation:?rotate?2s;
或者：
animation-name:?rotate;
animation-duration:?2s;
通過(guò)
animation-name 來(lái)指定動(dòng)畫使用的關(guān)鍵幀，這個(gè)是必須的。用
JS 來(lái)理解的話，相當(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ù)，可以用來(lái)實(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)一步簡(jiǎn)寫：
@keyframes?move{
??0%,?66%{
????transform:?translate(0,0);
??}
??33%,100%{
????transform:?translate(200px,0);
??}
}
此時(shí)，動(dòng)畫時(shí)長(zhǎng)改成了
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)畫填充模式，具體說(shuō)的是什么事情呢？
@keyframes 只是定義了動(dòng)畫過(guò)程中每一幀的值，然而在動(dòng)畫開始前和動(dòng)畫結(jié)束后，元素改處于什么狀態(tài)呢？
animation-fill-mode 說(shuō)的就是這個(gè)事情。除了默認(rèn)值
none 外，還有另外 3 個(gè)值：
舉個(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)行過(guò)了那么長(zhǎng)時(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)要注意，無(wú)限播放時(shí)使用
infinite。另一個(gè)是播放方向
animation-direction，它的意思說(shuō)指定動(dòng)畫按照指定順序來(lái)播放
@keyframes 定義的關(guān)鍵幀。其值有：
示意如下：
animation 屬性以及 8 個(gè)子屬性介紹完了，另外需要說(shuō)明的是它們與
background 及其各子屬性一樣，是支持多個(gè)值的，即在同一個(gè)元素上應(yīng)用多個(gè)動(dòng)畫，送給大家一個(gè)如意金箍棒：