CSS3動(dòng)畫(huà)包括過(guò)渡動(dòng)畫(huà)和關(guān)鍵幀動(dòng)畫(huà)，它們主要通過(guò)改變CSS屬性值來(lái)模擬實(shí)現(xiàn)。我將詳細(xì)介紹Transform、Transitions和Animations 3大功能模塊，其中Transform實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)對(duì)象的變形操作，Transitions實(shí)現(xiàn)CSS屬性過(guò)渡變化，Animations實(shí)現(xiàn)CSS樣式分步式演示效果。

1、CSS3變形

2012年9月，W3C發(fā)布CSS3變形工作草案。這個(gè)草案包括CSS3 2D變形和CSS3 3D變形。CSS 2D Transform獲得各主流瀏覽器的支持，CSS 3D Transform支持程度不是很完善。本節(jié)重點(diǎn)講解2D變形，有關(guān)3D變形可以參考我的其它帖子。

1.1、設(shè)置原點(diǎn)

CSS變形的原點(diǎn)默認(rèn)為對(duì)象的中心點(diǎn)(50% 50%)，使用transform-origin屬性可以重新設(shè)置新的變形原點(diǎn)。語(yǔ)法格式如下所示：

    transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?

取值簡(jiǎn)單說(shuō)明如下：

• <percentage>：用百分比指定坐標(biāo)值，可以為負(fù)值。
• <length>：用長(zhǎng)度值指定坐標(biāo)值，可以為負(fù)值。
• left：指定原點(diǎn)的橫坐標(biāo)為left。
• center①：指定原點(diǎn)的橫坐標(biāo)為center。
• right：指定原點(diǎn)的橫坐標(biāo)為right。
• top：指定原點(diǎn)的縱坐標(biāo)為top。
• center②：指定原點(diǎn)的縱坐標(biāo)為center。
• bottom：指定原點(diǎn)的縱坐標(biāo)為bottom。

【示例】通過(guò)重置變形原點(diǎn)，可以設(shè)計(jì)不同的變形效果。以圖像的右上角為原點(diǎn)逆時(shí)針旋轉(zhuǎn)圖像45度：

    <style type="text/css">img {                                    /* 固定兩幅圖像相同大小和相同顯示位置 */position: absolute;left: 20px;top: 10px;width: 170px;width: 250px;}img.bg {                                 /* 設(shè)置第1幅圖像作為參考 */opacity: 0.3;border: dashed 1px red;}img.change {                             /* 變形第2幅圖像 */border: solid 1px red;transform-origin: top right;         /* 以右上角為原點(diǎn)進(jìn)行變形*/transform: rotate(-45deg);           /* 逆時(shí)針旋轉(zhuǎn)45度*/}</style><img class="bg" src="images/1.jpg"><img class="change" src="images/1.jpg">

比較效果如下圖所示：

1.2、2D旋轉(zhuǎn)

rotate()函數(shù)能夠在2D空間內(nèi)旋轉(zhuǎn)對(duì)象，語(yǔ)法格式如下：

    rotate(<angle>)

其中，參數(shù)angle表示角度值，取值單位可以是：度，如90deg（90度，一圈360度）；梯度，如100 grad（相當(dāng)于90度，360度等于400 grad）；弧度，如1.57 rad（約等于90度，360度等于2π）；圈，如0.25 turn（等于90度，360度等于1 turn）。

【示例】以上節(jié)示例為基礎(chǔ)，按默認(rèn)原點(diǎn)逆時(shí)針旋轉(zhuǎn)圖像45度：

    img.change {border: solid 1px red;transform: rotate(-45deg);}

效果如下圖所示：

1.3、2D縮放

scale()函數(shù)能夠縮放對(duì)象大小，語(yǔ)法格式如下：

    scale(<number>[, <number>])

該函數(shù)包含兩個(gè)參數(shù)值，分別用來(lái)定義寬和高的縮放比例。取值簡(jiǎn)單說(shuō)明如下：

• 如果取值為正數(shù)，則基于指定的寬度和高度將放大或縮小對(duì)象。
• 如果取值為負(fù)數(shù)，則不會(huì)縮小元素，而是翻轉(zhuǎn)元素（如文字被反轉(zhuǎn)），然后再縮放元素。
• 如果取值為小于1的小數(shù)（如0.5）可以縮小元素。
• 如果第二個(gè)參數(shù)省略，則第二個(gè)參數(shù)等于第一個(gè)參數(shù)值。

【示例】繼續(xù)以上節(jié)示例為基礎(chǔ)，按默認(rèn)原點(diǎn)把圖像縮小1/2：

    img.change {border: solid 1px red;transform: scale(0.5);}

1.4、2D平移

translate()函數(shù)能夠平移對(duì)象的位置，語(yǔ)法格式如下：

    translate(<translation-value>[, <translation-value>])

該函數(shù)包含兩個(gè)參數(shù)值，分別用來(lái)定義對(duì)象在x軸和y軸相對(duì)于原點(diǎn)的偏移距離。如果省略參數(shù)，則默認(rèn)值為0。如果取負(fù)值，則表示反向偏移，參考原點(diǎn)保持不變。

【示例】設(shè)計(jì)向右下角方向平移圖像，其中x軸偏移150px，y軸偏移50px：

    img.change {border: solid 1px red;transform: translate(150px, 50px);}

1.5、2D傾斜

skew()函數(shù)能夠傾斜顯示對(duì)象，語(yǔ)法格式如下：

    skew(<angle> [, <angle>])

該函數(shù)包含兩個(gè)參數(shù)值，分別用來(lái)定義對(duì)象在x軸和y軸傾斜的角度。如果省略參數(shù)，則默認(rèn)值為0。與rotate()函數(shù)不同，rotate()函數(shù)只是旋轉(zhuǎn)對(duì)象的角度，而不會(huì)改變對(duì)象的形狀；skew()函數(shù)會(huì)改變對(duì)象的形狀。

【示例】使用skew()函數(shù)變形圖像，x軸傾斜30度，y軸傾斜20度：

    img.change {border: solid 1px red;transform: skew(30deg, 20deg);}

效果如下圖所示：

1.6、2D矩陣

matrix()是一個(gè)矩陣函數(shù)，它可以同時(shí)實(shí)現(xiàn)縮放、旋轉(zhuǎn)、平移和傾斜操作，語(yǔ)法格式如下：

    matrix(<number>, <number>, <number>, <number>, <number>, <number>)

該函數(shù)包含6個(gè)值，具體說(shuō)明如下：

• 第1個(gè)參數(shù)控制x軸縮放。
• 第2個(gè)參數(shù)控制x軸傾斜。
• 第3個(gè)參數(shù)控制y軸傾斜。
• 第4個(gè)參數(shù)控制y軸縮放。
• 第5個(gè)參數(shù)控制x軸平移。
• 第6個(gè)參數(shù)控制y軸平移。

【示例】使用matrix()函數(shù)模擬：

    img.change {border: solid 1px red;transform: matrix(1, 0.6, 0.2, 1, 0, 0);}

提示：多個(gè)變形函數(shù)可以在一個(gè)聲明中同時(shí)定義。例如：

    div {transform: translate(80, 80);transform: rotate(45deg);transform: scale(1.5, 1.5);}

針對(duì)上面樣式，可以簡(jiǎn)化為：

    div { transform: translate(80, 80) rotate(45deg) scale(1.5, 1.5);}

2、過(guò)渡動(dòng)畫(huà)

2013年2月，W3C發(fā)布CSS Transitions工作草案，這個(gè)草案描述了CSS過(guò)渡動(dòng)畫(huà)的基本實(shí)現(xiàn)方法和屬性，目前獲得所有瀏覽器的支持。

2.1、設(shè)置過(guò)渡屬性

transition-property屬性定義過(guò)渡動(dòng)畫(huà)的CSS屬性名稱(chēng)，基本語(yǔ)法如下所示：

    transition-property:none | all | [ <IDENT> ] [ ‘,’ <IDENT> ]*;

取值簡(jiǎn)單說(shuō)明如下：

• none：表示沒(méi)有元素。
• all：默認(rèn)值，表示針對(duì)所有元素，包括:before和:after偽元素。
• IDENT：指定CSS屬性列表。幾乎所有色彩、大小或位置等相關(guān)的CSS屬性，包括許多新添加的CSS3屬性都可以應(yīng)用過(guò)渡，如CSS3變換中的放大、縮小、旋轉(zhuǎn)、斜切、漸變等。

【示例】指定動(dòng)畫(huà)的屬性為背景顏色。這樣當(dāng)鼠標(biāo)經(jīng)過(guò)盒子時(shí)，會(huì)自動(dòng)從紅色背景過(guò)渡到藍(lán)色背景：

    <style type="text/css">div {margin: 10px auto; height: 80px;background: red;border-radius: 12px;box-shadow: 2px 2px 2px #999;}div:hover {background-color: blue;/*指定動(dòng)畫(huà)過(guò)渡的CSS屬性*/transition-property: background-color;}</style><div></div>

2.2、設(shè)置過(guò)渡時(shí)間

transition-duration屬性定義轉(zhuǎn)換動(dòng)畫(huà)的時(shí)間長(zhǎng)度，基本語(yǔ)法如下所示：

    transition-duration:<time> [, <time>]*;

其中，初始值為0，適用于所有元素，以及:before和:after偽元素。在默認(rèn)情況下，動(dòng)畫(huà)過(guò)渡時(shí)間為0 s，當(dāng)指定元素動(dòng)畫(huà)時(shí)，會(huì)看不到過(guò)渡的過(guò)程，而直接看到結(jié)果。

【示例】以上節(jié)示例為例，設(shè)置動(dòng)畫(huà)過(guò)渡時(shí)間為2 s，當(dāng)鼠標(biāo)移過(guò)對(duì)象時(shí)，會(huì)看到背景色從紅色逐漸過(guò)渡到藍(lán)色：

    div:hover {background-color: blue;/*指定動(dòng)畫(huà)過(guò)渡的CSS屬性*/transition-property: background-color;/*指定動(dòng)畫(huà)過(guò)渡的時(shí)間*/transition-duration:2s;}

2.3、設(shè)置延遲過(guò)渡時(shí)間

transition-delay屬性定義開(kāi)啟過(guò)渡動(dòng)畫(huà)的延遲時(shí)間，基本語(yǔ)法如下所示：

    transition-delay:<time> [, <time>]*;

其中，初始值為0，適用于所有元素，以及:before和:after偽元素。設(shè)置時(shí)間可以為正整數(shù)、負(fù)整數(shù)和零。非零的時(shí)候必須設(shè)置單位是s（秒）或者ms（毫秒）；為負(fù)數(shù)的時(shí)候，過(guò)渡的動(dòng)作會(huì)從該時(shí)間點(diǎn)開(kāi)始顯示，之前的動(dòng)作被截?cái)?#xff1b;為正數(shù)的時(shí)候，過(guò)渡的動(dòng)作會(huì)延遲觸發(fā)。

【示例】繼續(xù)以上節(jié)示例為基礎(chǔ)進(jìn)行介紹，設(shè)置過(guò)渡動(dòng)畫(huà)推遲2s后執(zhí)行，則當(dāng)鼠標(biāo)移過(guò)對(duì)象時(shí)，會(huì)看不到任何變化，過(guò)了2 s之后，才發(fā)現(xiàn)背景色從紅色逐漸過(guò)渡到藍(lán)色。

    div:hover {background-color: blue;/*指定動(dòng)畫(huà)過(guò)渡的CSS屬性*/transition-property: background-color;/*指定動(dòng)畫(huà)過(guò)渡的時(shí)間*/transition-duration: 2s;/*指定動(dòng)畫(huà)延遲觸發(fā) */transition-delay: 2s;}

2.4、設(shè)置過(guò)渡動(dòng)畫(huà)類(lèi)型

transition-timing-function屬性定義過(guò)渡動(dòng)畫(huà)的類(lèi)型，基本語(yǔ)法如下所示：

    transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubicbezier(<number>, <number>, <number>, <number>)
[, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>,<number>, <number>)]*

屬性初始值為ease，取值簡(jiǎn)單說(shuō)明如下：

• ease：平滑過(guò)渡，等同于cubic-bezier(0.25, 0.1, 0.25, 1.0)函數(shù)，即立方貝塞爾。
• linear：線(xiàn)性過(guò)渡，等同于cubic-bezier(0.0, 0.0, 1.0, 1.0)函數(shù)。
• ease-in：由慢到快，等同于cubic-bezier(0.42, 0, 1.0, 1.0)函數(shù)。
• ease-out：由快到慢，等同于cubic-bezier(0, 0, 0.58, 1.0)函數(shù)。
• ease-in-out：由慢到快再到慢，等同于cubic-bezier(0.42,0, 0.58, 1.0)函數(shù)。
• cubic-bezier：特殊的立方貝塞爾曲線(xiàn)效果。

【示例】繼續(xù)以上節(jié)示例為基礎(chǔ)進(jìn)行介紹，設(shè)置過(guò)渡類(lèi)型為線(xiàn)性效果，代碼如下所示：

    div:hover {background-color: blue;/*指定動(dòng)畫(huà)過(guò)渡的CSS屬性*/transition-property: background-color;/*指定動(dòng)畫(huà)過(guò)渡的時(shí)間*/transition-duration: 10s;/*指定動(dòng)畫(huà)過(guò)渡為線(xiàn)性效果 */transition-timing-function: linear;}

2.5、設(shè)置過(guò)渡觸發(fā)動(dòng)作

CSS3過(guò)渡動(dòng)畫(huà)一般通過(guò)動(dòng)態(tài)偽類(lèi)觸發(fā)，如下表所示：

也可以通過(guò)JavaScript事件觸發(fā)，包括click、focus、mousemove、mouseover、mouseout等。

1、:hover

最常用的過(guò)渡觸發(fā)方式是使用:hover偽類(lèi)。

【示例1】設(shè)計(jì)當(dāng)鼠標(biāo)經(jīng)過(guò)div元素時(shí)，該元素的背景顏色會(huì)在經(jīng)過(guò)1 s的初始延遲后，于2 s內(nèi)動(dòng)態(tài)地從綠色變?yōu)樗{(lán)色。

    <style type="text/css">div {margin: 10px auto;height: 80px;border-radius: 12px;box-shadow: 2px 2px 2px #999;background-color: red;transition: background-color 2s ease-in 1s;}div:hover { background-color: blue}</style><div></div>

2、:active

:active偽類(lèi)表示用戶(hù)單擊某個(gè)元素并按住鼠標(biāo)按鈕時(shí)顯示的狀態(tài)。

【示例2】設(shè)計(jì)當(dāng)用戶(hù)單擊div元素時(shí)，該元素被激活，這時(shí)會(huì)觸發(fā)動(dòng)畫(huà)，高度屬性從200px過(guò)渡到400px。如果按住該元素，保持活動(dòng)狀態(tài)，則div元素始終顯示400px高度，松開(kāi)鼠標(biāo)之后，又會(huì)恢復(fù)到原來(lái)的高度：

    <style type="text/css">div {margin: 10px auto;border-radius: 12px;box-shadow: 2px 2px 2px #999;background-color: #8AF435;height: 200px;transition: width 2s ease-in;}div:active {height: 400px;}</style><div></div>

3、: focus

:focus偽類(lèi)通常會(huì)在表單對(duì)象接收鍵盤(pán)響應(yīng)時(shí)出現(xiàn)。

【示例3】當(dāng)輸入框獲取焦點(diǎn)時(shí)，輸入框的背景色逐步高亮顯示，如下圖所示：

    <style type="text/css">label {display: block;margin: 6px 2px;}input[type="text"], input[type="password"] {padding: 4px;border: solid 1px #ddd;transition: background-color 1s ease-in;}input:focus { background-color: #9FFC54;}</style><form id=fm-form action="" method=post><fieldset><legend>用戶(hù)登錄</legend><label for="name">姓名<input type="text" id="name" name="name" ></label><label for="pass">密碼<input type="password" id="pass" name="pass" ></label></fieldset></form>

提示：把:hover偽類(lèi)與:focus配合使用，能夠豐富鼠標(biāo)用戶(hù)和鍵盤(pán)用戶(hù)的體驗(yàn)。

4、:checked

:checked偽類(lèi)在發(fā)生選中狀況時(shí)觸發(fā)過(guò)渡，取消選中則恢復(fù)原來(lái)的狀態(tài)。

【示例4】設(shè)計(jì)當(dāng)復(fù)選框被選中時(shí)緩慢縮進(jìn)2個(gè)字符：

    <style type="text/css">label.name {display: block;margin: 6px 2px;}input[type="text"], input[type="password"] {padding: 4px;border: solid 1px #ddd;}input[type="checkbox"] { transition: margin 1s ease;}input[type="checkbox"]:checked { margin-left: 2em;}</style><form id=fm-form action="" method=post><fieldset><legend>用戶(hù)登錄</legend><label class="name" for="name">姓名<input type="text" id="name" name="name" ></label><p>技術(shù)專(zhuān)長(zhǎng)<br><label><input type="checkbox" name="web" value="html" id="web_0">HTML</label><br><label><input type="checkbox" name="web" value="css" id="web_1">CSS</label><br><label><input type="checkbox" name="web" value="javascript" id="web_2">JavaScript</label><br></p></fieldset></form>

演示效果：

5、媒體查詢(xún)

觸發(fā)元素狀態(tài)變化的另一種方法是使用CSS3媒體查詢(xún)。

【示例5】設(shè)計(jì)div元素的寬度和高度為49%×200px，如果用戶(hù)將窗口大小調(diào)整到420px或以下，則該元素將過(guò)渡為100%×100px。也就是說(shuō)，當(dāng)窗口寬度變化經(jīng)過(guò)420px的閾值時(shí)，將會(huì)觸發(fā)過(guò)渡動(dòng)畫(huà)：

    <style type="text/css">div {float: left; margin: 2px;width: 49%; height: 200px;background: #93FB40;border-radius: 12px;box-shadow: 2px 2px 2px #999;transition: width 1s ease, height 1s ease;}@media only screen and (max-width : 420px) {div {width: 100%;height: 100px;}}</style><div></div><div></div>

6、JavaScript事件

【示例6】可以使用純粹的CSS偽類(lèi)觸發(fā)過(guò)渡，為了方便用戶(hù)理解，這里通過(guò)jQuery腳本觸發(fā)過(guò)渡：

    <script type="text/javascript" src="images/jquery-1.10.2.js"></script><script type="text/javascript">$(function() {$("#button").click(function() {$(".box").toggleClass("change");});});</script><style type="text/css">.box {margin:4px;background: #93FB40;border-radius: 12px;box-shadow: 2px 2px 2px #999;width: 50%; height: 100px;transition: width 2s ease, height 2s ease;}.change { width: 100%; height: 120px;}</style><input type="button" id="button" value="觸發(fā)過(guò)渡動(dòng)畫(huà)" /><div class="box"></div>

在文檔中包含一個(gè)box類(lèi)的盒子和一個(gè)按鈕，當(dāng)單擊按鈕時(shí)，jQuery腳本會(huì)將盒子的類(lèi)切換為change，從而觸發(fā)過(guò)渡動(dòng)畫(huà)：

上面演示了樣式發(fā)生變化會(huì)導(dǎo)致過(guò)渡動(dòng)畫(huà)，也可以通過(guò)其他方法觸發(fā)這些更改，包括通過(guò)JavaScript腳本動(dòng)態(tài)更改。從執(zhí)行效率來(lái)看，事件通常應(yīng)當(dāng)通過(guò)JavaScript觸發(fā)，簡(jiǎn)單動(dòng)畫(huà)或過(guò)渡則應(yīng)使用CSS觸發(fā)。

3、幀動(dòng)畫(huà)

2012年4月，W3C發(fā)布CSS Animations工作草案，在這個(gè)草案中描述了CSS關(guān)鍵幀動(dòng)畫(huà)的基本實(shí)現(xiàn)方法和屬性。目前主流瀏覽器都支持CSS幀動(dòng)畫(huà)。

3.1、設(shè)置關(guān)鍵幀

CSS3使用@keyframes定義關(guān)鍵幀，具體用法如下所示：

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

其中參數(shù)說(shuō)明如下：

• animationname：定義動(dòng)畫(huà)的名稱(chēng)。
• keyframes-selector：定義幀的時(shí)間位置，也就是動(dòng)畫(huà)時(shí)長(zhǎng)的百分比，合法的值包括：0～100%、from（等價(jià)于0）、to（等價(jià)于100%）。
• css-styles：表示一個(gè)或多個(gè)合法的CSS樣式屬性。

在動(dòng)畫(huà)設(shè)計(jì)過(guò)程中，用戶(hù)能夠多次改變CSS樣式，以百分比定義樣式改變發(fā)生的時(shí)間，或者通過(guò)關(guān)鍵詞from和to。為了獲得最佳瀏覽器支持，設(shè)計(jì)關(guān)鍵幀動(dòng)畫(huà)時(shí)，應(yīng)該始終定義0和100%位置幀。最后，為每幀定義動(dòng)態(tài)樣式，同時(shí)將動(dòng)畫(huà)與選擇器綁定。

【示例】演示讓一個(gè)小方盒沿著方形框內(nèi)壁勻速運(yùn)動(dòng)：

    <style>#wrap {                                    /* 定義運(yùn)動(dòng)軌跡包含框*/position:relative;                     /* 定義定位包含框，避免小盒子跑到外面運(yùn)動(dòng)*/border:solid 1px red;width:250px; height:250px;}#box {                                     /* 定義運(yùn)動(dòng)小盒的樣式*/position:absolute;left:0; top:0;width: 50px; height: 50px;background: #93FB40;border-radius: 8px;box-shadow: 2px 2px 2px #999;/*定義幀動(dòng)畫(huà)：名稱(chēng)為ball，動(dòng)畫(huà)時(shí)長(zhǎng)5s，動(dòng)畫(huà)類(lèi)型為勻速漸變，動(dòng)畫(huà)無(wú)限播放*/animation: ball 5s linear infinite;}/*定義關(guān)鍵幀：共包括5幀，分別在總時(shí)長(zhǎng)為0、25%、50%、75%、100%的位置*//*每幀中設(shè)置動(dòng)畫(huà)屬性為left和top，讓它們的值勻速漸變，產(chǎn)生運(yùn)動(dòng)動(dòng)畫(huà)*/@keyframes ball {0 {left:0;top:0;}25% {left:200px;top:0;}50% {left:200px;top:200px;}75% {left:0;top:200px;}100% {left:0;top:0;}}</style><div id="wrap"><div id="box"></div></div>

3.2、設(shè)置動(dòng)畫(huà)屬性

Animations功能與Transition功能相同，都是通過(guò)改變?cè)氐膶傩灾祵?shí)現(xiàn)動(dòng)畫(huà)效果。它們的區(qū)別在于：使用Transitions功能時(shí)只能通過(guò)指定屬性的開(kāi)始值與結(jié)束值，然后以在這兩個(gè)屬性值之間進(jìn)行平滑過(guò)渡的方式實(shí)現(xiàn)動(dòng)畫(huà)效果，因此不能實(shí)現(xiàn)比較復(fù)雜的動(dòng)畫(huà)效果；而Animations功能則通過(guò)定義多個(gè)關(guān)鍵幀以及定義每個(gè)關(guān)鍵幀中元素的屬性值實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫(huà)效果。

1.定義動(dòng)畫(huà)名稱(chēng)

使用animation-name屬性可以定義CSS動(dòng)畫(huà)的名稱(chēng)，語(yǔ)法如下所示：

    animation-name:none | IDENT [, none | IDENT ]*;

其中，初始值為none，定義一個(gè)適用的動(dòng)畫(huà)列表。每個(gè)名字用來(lái)選擇動(dòng)畫(huà)關(guān)鍵幀，提供動(dòng)畫(huà)的屬性值。如名稱(chēng)是none，就不會(huì)有動(dòng)畫(huà)。

2.定義動(dòng)畫(huà)時(shí)間

使用animation-duration屬性可以定義CSS動(dòng)畫(huà)的播放時(shí)間，語(yǔ)法如下所示。

    animation-duration:<time> [, <time>]*;

在默認(rèn)情況下，該屬性值為0，這意味著動(dòng)畫(huà)周期為0，即不會(huì)有動(dòng)畫(huà)。當(dāng)值為負(fù)值時(shí)，則被視為0。

3.定義動(dòng)畫(huà)類(lèi)型

使用animation-timing-function屬性可以定義CSS動(dòng)畫(huà)類(lèi)型，語(yǔ)法如下所示。

    animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubicbezier(<number>, <number>, number>, <number>) [,
ease | linear |ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>,<number>, <number>)]*

初始值為ease，取值說(shuō)明可參考上面介紹的過(guò)渡動(dòng)畫(huà)類(lèi)型。

4.定義延遲時(shí)間

使用animation-delay屬性可以定義CSS動(dòng)畫(huà)延遲播放的時(shí)間，語(yǔ)法如下所示：

    animation-delay:<time> [, <time>]*;

該屬性允許一個(gè)動(dòng)畫(huà)開(kāi)始執(zhí)行一段時(shí)間后才被應(yīng)用。當(dāng)動(dòng)畫(huà)延遲時(shí)間為0，即默認(rèn)動(dòng)畫(huà)延遲時(shí)間，則意味著動(dòng)畫(huà)將盡快執(zhí)行，否則該值指定將延遲執(zhí)行的時(shí)間。

5.定義播放次數(shù)

使用animation-delay屬性可以定義CSS動(dòng)畫(huà)延遲播放的時(shí)間，語(yǔ)法如下所示：

    animation-delay:<time> [, <time>]*;

該屬性允許一個(gè)動(dòng)畫(huà)開(kāi)始執(zhí)行一段時(shí)間后才被應(yīng)用。當(dāng)動(dòng)畫(huà)延遲時(shí)間為0，即默認(rèn)動(dòng)畫(huà)延遲時(shí)間，則意味著動(dòng)畫(huà)將盡快執(zhí)行，否則該值指定將延遲執(zhí)行的時(shí)間。

6.定義播放方向

使用animation-direction屬性定義CSS動(dòng)畫(huà)的播放方向，基本語(yǔ)法如下所示。

    animation-direction:normal | alternate [, normal | alternate]*;

默認(rèn)值為normal。當(dāng)為默認(rèn)值時(shí)，動(dòng)畫(huà)的每次循環(huán)都向前播放。另一個(gè)值是alternate，設(shè)置該值則表示第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。

7.定義播放狀態(tài)

使用animation-play-state屬性定義動(dòng)畫(huà)正在運(yùn)行還是暫停，語(yǔ)法如下所示：

    animation-play-state: paused|running;

初始值為running。其中，paused定義動(dòng)畫(huà)已暫停，running定義動(dòng)畫(huà)正在播放。

提示：可以在JavaScript中使用該屬性，這樣就能在播放過(guò)程中暫停動(dòng)畫(huà)。在JavaScript腳本中用法如下。

8.定義播放外狀態(tài)

使用animation-fill-mode屬性定義動(dòng)畫(huà)播放外狀態(tài)，語(yǔ)法如下所示。

    animation-fill-mode：none | forwards | backwards | both [ , none | forwards | backwards | both ]*

初始值為none，如果提供多個(gè)屬性值，以逗號(hào)進(jìn)行分隔。取值說(shuō)明如下：

• none：不設(shè)置對(duì)象動(dòng)畫(huà)之外的狀態(tài)。
• forwards：設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)。
• backwards：設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)開(kāi)始時(shí)的狀態(tài)。
• both：設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)結(jié)束或開(kāi)始的狀態(tài)。

【示例】設(shè)計(jì)一個(gè)小球，并定義它水平向左運(yùn)動(dòng)，動(dòng)畫(huà)結(jié)束之后，再返回起始點(diǎn)位置：

    <style>/*啟動(dòng)運(yùn)動(dòng)的小球，并定義動(dòng)畫(huà)結(jié)束后返回*/.ball{width: 50px; height: 50px;background: #93FB40;border-radius: 100%;box-shadow:2px 2px 2px #999;animation:ball 1s ease backwards;}/*定義小球水平運(yùn)動(dòng)關(guān)鍵幀*/@keyframes ball{0%{transform:translate(0,0);}100%{transform:translate(400px);}}</style><div class="ball"></div>

效果如下圖所示：