們前面提到過(guò)，轉(zhuǎn)換（transitions） 實(shí)際上就是一種特殊的CSS動(dòng)畫(huà)（見(jiàn)《前端設(shè)計(jì)必須掌握：定義CSS樣式之間的切換》）：

• 只有兩個(gè)狀態(tài)： 起始狀態(tài)和終止?fàn)顟B(tài)

• 動(dòng)畫(huà)不會(huì)出現(xiàn)循環(huán)

• 中間狀態(tài)只能由時(shí)變函數(shù)（transition-timing-function）來(lái)控制

實(shí)際動(dòng)畫(huà)需求要復(fù)雜得多，比如我們可能會(huì)需要：

• 自動(dòng)播放的動(dòng)畫(huà)（不會(huì)有交互狀態(tài)）

• 控制中間狀態(tài)

• 創(chuàng)建循環(huán)動(dòng)畫(huà)

• 在同一個(gè)HTML元素上應(yīng)用不同的動(dòng)畫(huà)

• 在動(dòng)畫(huà)過(guò)程中控制不同的元素屬性

• 給不同的屬性應(yīng)用不同的時(shí)變函數(shù)

這個(gè)時(shí)候就需要使用CSS3動(dòng)畫(huà)（animation）特性，而且提供了更多的功能。CSS3動(dòng)畫(huà)就像一部迷你電影，里面有演員（HTML元素）、劇本（keyframes）以及動(dòng)作片段（CSS規(guī)則）。

animation 屬性

和 transition 屬性一樣，animation 是一組動(dòng)畫(huà)屬性的速寫(xiě)：

• name: 動(dòng)畫(huà)名稱(chēng)

• duration: 動(dòng)畫(huà)持續(xù)時(shí)間

• timing-function: 時(shí)變函數(shù)，用來(lái)計(jì)算中間狀態(tài)

• delay: 延時(shí)，在一定時(shí)候后啟動(dòng)動(dòng)畫(huà)

• iteration-count: 動(dòng)畫(huà)重復(fù)的次數(shù)

• direction: 動(dòng)畫(huà)的運(yùn)行方向，可以是反過(guò)來(lái)的

• fill-mode: 動(dòng)畫(huà)填充模式，用來(lái)確定動(dòng)畫(huà)開(kāi)始之前和結(jié)束之后的樣式

例：按鈕彈跳動(dòng)畫(huà)

CSS代碼如下：

效果圖如下：

首先我們選定“演員”為一個(gè)加載按鈕（html元素），然后設(shè)定其表演劇本（keyframes）為彈跳，然后添加一些動(dòng)作指令（CSS規(guī)則）來(lái)創(chuàng)建一個(gè)CSS3動(dòng)畫(huà)：

• name: bouncing （動(dòng)畫(huà)名稱(chēng)必須和keyframes名稱(chēng)一致）

• duration: 0.5s （持續(xù)0.5秒）

• timing-function: cubic-bezier(0.1,0.25,0.1,1)

• delay: 0s （沒(méi)有延遲）

• iteration-count: infinite （無(wú)限循環(huán)）

• direction: alternate （交替往返）

• fill-mode: both（填充模式同時(shí)應(yīng)用backwards和forwards規(guī)則，后面會(huì)詳細(xì)說(shuō)明）

@keyframes

在“電影開(kāi)拍”之前，我們得創(chuàng)建“劇本”（@keyframes，即關(guān)鍵幀），用來(lái)規(guī)定動(dòng)畫(huà)中間的每一個(gè)表演步驟。@keyframes通過(guò)percentages（百分比格式的時(shí)間坐標(biāo)）來(lái)定義：

• 0% 動(dòng)畫(huà)的第一幀（可選）。

• 50% 動(dòng)畫(huà)的中間時(shí)間節(jié)點(diǎn)。

• 100% 動(dòng)畫(huà)的最后一幀。

我們也可以分別使用關(guān)鍵詞 from 和 to 來(lái)代替 0% 和 100%。

你可以定義任意多的keyframes，比如 33%, 4% 乃至 29.86%。每個(gè) keyframe 都是一個(gè) CSS規(guī)則，定義這個(gè)時(shí)間節(jié)點(diǎn)下元素的某個(gè)或某些屬性。

@keyframes 具體語(yǔ)法定義如下：

@keyframes animationname {keyframes-selector {css-styles;}}

• animationname: 必需。定義動(dòng)畫(huà)的名稱(chēng)。

• keyframes-selector: 必需。百分比格式的時(shí)間坐標(biāo)。合法的值：0-100% | from（與 0% 相同）| to（與 100% 相同）。

• css-styles: 必需。一個(gè)或多個(gè)合法的 CSS規(guī)則（樣式定義）。

CSS代碼：

效果圖如下：

上面的例子把起點(diǎn) 0% 和終點(diǎn) 100% 設(shè)置成一樣的狀態(tài)，并且是 infinite 播放，這樣可以確保動(dòng)畫(huà)的兩次播放之間的無(wú)縫銜接。

另外如果若干時(shí)間節(jié)點(diǎn)具有相同的樣式，可以合并在一起簡(jiǎn)寫(xiě)，比如：

如果在@keyframes中0%和100%時(shí)間點(diǎn)所設(shè)置的屬性有默認(rèn)值，那么有些情況下可以忽略不寫(xiě)。

動(dòng)畫(huà)名稱(chēng)（animation-name）

動(dòng)畫(huà)名稱(chēng)（animation-name）會(huì)至少出現(xiàn)兩次：

• 一次是“編寫(xiě)劇本” @keframes 時(shí)。

• 一次是“演員入戲”時(shí)，即設(shè)置HTML元素的 animation-name 屬性值為“劇本”的名稱(chēng)（或者在 animation 速寫(xiě)中）。

和CSS class名稱(chēng)一樣，animation 的名稱(chēng)只能包含：

• 字母 (a-z)

• 數(shù)字 (0-9)

• 下劃線 underscore (_)

• 中劃線 dash (-)

不能以數(shù)字或者兩個(gè)中劃線開(kāi)始。

動(dòng)畫(huà)持續(xù)時(shí)間（animation-duration）

和 transition durations 一樣，animation durations 可以設(shè)置為 秒 1s 或 毫秒 200ms。

默認(rèn)值為 0s，即不會(huì)有動(dòng)畫(huà)出現(xiàn)。

動(dòng)畫(huà)時(shí)變函數(shù)（animation-timing-function）

和 transition timing functions 一樣，animation timing functions 可以使用一些預(yù)定義的關(guān)鍵詞比如 linear, ease-out, 或者使用cubic bezier函數(shù)來(lái)自定義。

缺省值是 ease。

我們可以通過(guò)設(shè)置線性時(shí)變函數(shù)以及自定義的@keyframes來(lái)模擬復(fù)雜的貝塞爾曲線。Bounce.js 就是這樣一個(gè)在線高級(jí)動(dòng)畫(huà)生成工具，支持導(dǎo)出CSS樣式代碼。

動(dòng)畫(huà)延時(shí)（animation-delay）

和 transition delays 一樣，animation delays 可以設(shè)置為 秒 1s 或 毫秒 200ms。

默認(rèn)值為 0s，即不會(huì)有延遲。

這個(gè)屬性在觸發(fā)多個(gè)時(shí)間交替的動(dòng)畫(huà)序列時(shí)很有用。

動(dòng)畫(huà)循環(huán)次數(shù)（animation-iteration-count）

默認(rèn)情況下，動(dòng)畫(huà)只運(yùn)行一次（即默認(rèn)值為 1），你可以設(shè)置3種類(lèi)型的數(shù)值：

• 整數(shù) 如 2 或 3

• 小數(shù) 如 0.5，意味著只運(yùn)行動(dòng)畫(huà)的一半

• 關(guān)鍵詞 infinite 無(wú)限重復(fù)

動(dòng)畫(huà)方向（animation-direction）

animation-direction 定義瀏覽器對(duì)@keyframes的讀取順序。

• normal: 正常方向，從 0% 開(kāi)始，到 100% 結(jié)束，然后再?gòu)?0% 開(kāi)始。

• reverse: 相反方向，從 100% 開(kāi)始，到 0% 結(jié)束，然后再?gòu)?100% 開(kāi)始。

• alternate: 交替方向，從 0% 開(kāi)始，到 100% ，再到 0%。

• alternate-reverse: 反向交替方向，從 100% 開(kāi)始，到 0%，再到 100%。

通過(guò)下面的循環(huán)動(dòng)畫(huà)，對(duì)比小方塊的運(yùn)動(dòng)軌跡，可以比較直觀的感受這幾個(gè)方向取值之間的差別：

動(dòng)畫(huà)填充模式（animation-fill-mode）

animation-fill-mode 用來(lái)確定動(dòng)畫(huà)開(kāi)始之前和結(jié)束之后的狀態(tài)。這樣才是一個(gè)完整的動(dòng)畫(huà)過(guò)程。

通過(guò) keyframes 我們定義了動(dòng)畫(huà)不同階段下的CSS規(guī)則，這有可能會(huì)和已經(jīng)定義的樣式?jīng)_突。

填充模式屬性允許我們告訴瀏覽器是否動(dòng)畫(huà)樣式在動(dòng)畫(huà)之外也生效。

讓我們想象這樣一個(gè)按鈕：

• 默認(rèn)是紅色

• 在動(dòng)畫(huà)開(kāi)始時(shí)被設(shè)置為綠色

• 在動(dòng)畫(huà)結(jié)束時(shí)被設(shè)置為藍(lán)色

效果圖：

我們可以簡(jiǎn)單的理解為：forwards就是動(dòng)畫(huà)樣式作用區(qū)間向時(shí)間軸正方向（->）延伸，backwards則向負(fù)方向（<-）延伸，而both就是雙向（<- ->）延伸。從而影響到相鄰區(qū)間的默認(rèn)樣式。