CSS3動(dòng)畫功能允許您創(chuàng)建關(guān)鍵幀動(dòng)畫。
在上一章中，您已經(jīng)了解了如何執(zhí)行簡(jiǎn)單的動(dòng)畫，例如通過CSS3過渡功能將屬性從一個(gè)值動(dòng)畫化為另一個(gè)值。 但是，CSS3過渡幾乎無法控制動(dòng)畫如何隨著時(shí)間進(jìn)行。
CSS3動(dòng)畫在基于關(guān)鍵幀的動(dòng)畫方面更進(jìn)一步，使您可以將CSS屬性隨時(shí)間的變化指定為一組關(guān)鍵幀，例如Flash動(dòng)畫。
創(chuàng)建CSS動(dòng)畫是一個(gè)兩步過程，如以下示例所示：
構(gòu)建CSS動(dòng)畫的第一步是定義各個(gè)關(guān)鍵幀，并使用關(guān)鍵幀聲明為動(dòng)畫命名。
第二步是使用animation-name屬性按名稱引用關(guān)鍵幀，并添加animation-duration和其他可選動(dòng)畫屬性來指定動(dòng)畫的行為。
但是，在引用或應(yīng)用關(guān)鍵幀規(guī)則之前不必定義關(guān)鍵幀規(guī)則。 下面的示例將向您展示如何使用CSS3動(dòng)畫功能將<div>框從一個(gè)位置水平設(shè)置為另一位置的動(dòng)畫。
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 2s;
animation-name: moveit;
animation-duration: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}測(cè)試看看?/?您必須至少指定兩個(gè)屬性animation-name和animation-duration（大于0），才能執(zhí)行動(dòng)畫。但是，所有其他的動(dòng)畫屬性都是可選的，因?yàn)樗鼈兊哪J(rèn)值不會(huì)阻止動(dòng)畫的發(fā)生。
注意：并非所有CSS屬性都是可動(dòng)畫的。通常，任何接受數(shù)字，長(zhǎng)度，百分比或顏色值的CSS屬性都是可動(dòng)畫的。
關(guān)鍵幀用于指定動(dòng)畫各個(gè)階段的動(dòng)畫屬性的值。 關(guān)鍵幀是使用專門的CSS規(guī)則-@keyframes指定的。 關(guān)鍵幀樣式規(guī)則的關(guān)鍵幀選擇器以百分比（％）開頭或關(guān)鍵字從（等于0％）到到（等于100％）。 選擇器用于指定在動(dòng)畫過程中關(guān)鍵幀的構(gòu)建位置。
百分比代表動(dòng)畫持續(xù)時(shí)間的百分比，0％代表動(dòng)畫的起點(diǎn)，100％代表終點(diǎn)，50％代表中點(diǎn)，依此類推。 這意味著2s動(dòng)畫中的50％關(guān)鍵幀將成為動(dòng)畫中的1s。
.box {
width: 50px;
height: 50px;
margin: 100px;
background: red;
position: relative;
left: 0;
/* Chrome, Safari, Opera */
-webkit-animation-name: shakeit;
-webkit-animation-duration: 2s;
animation-name: shakeit;
animation-duration: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes shakeit {
12.5% {left: -50px;}
25% {left: 50px;}
37.5% {left: -25px;}
50% {left: 25px;}
62.5% {left: -10px;}
75% {left: 10px;}
}
@keyframes shakeit {
12.5% {left: -50px;}
25% {left: 50px;}
37.5% {left: -25px;}
50% {left: 25px;}
62.5% {left: -10px;}
75% {left: 10px;}
}測(cè)試看看?/?創(chuàng)建動(dòng)畫時(shí)需要考慮許多屬性。但是，也可以在一個(gè)屬性中指定所有動(dòng)畫屬性，以縮短代碼。
該animation屬性是一種簡(jiǎn)寫屬性，用于按列出的順序一次設(shè)置所有單個(gè)動(dòng)畫屬性。例如：
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: repeatit 2s linear 0s infinite alternate;
animation: repeatit 2s linear 0s infinite alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes repeatit {
from {left: 0;}
to {left: 50%;}
}
@keyframes repeatit {
from {left: 0;}
to {left: 50%;}
}測(cè)試看看?/?注意：如果缺少或未指定任何值，則將使用該屬性的默認(rèn)值。這意味著，如果animation-duration缺少屬性的值，則不會(huì)發(fā)生過渡，因?yàn)槠淠J(rèn)值為0。
下表簡(jiǎn)要概述了所有與動(dòng)畫相關(guān)的屬性。
| 屬性 | 描述 |
|---|---|
| animation | 用于在單個(gè)聲明中設(shè)置所有動(dòng)畫屬性的簡(jiǎn)寫屬性。 |
| animation-name | 指定@keyframes應(yīng)應(yīng)用于所選元素的已定義動(dòng)畫的名稱。 |
| animation-duration | 指定動(dòng)畫完成一個(gè)動(dòng)畫周期所需的秒數(shù)或毫秒。 |
| animation-timing-function | 指定動(dòng)畫在每個(gè)周期的持續(xù)時(shí)間內(nèi)如何進(jìn)行，即緩動(dòng)功能。 |
| animation-delay | 指定動(dòng)畫何時(shí)開始。 |
| animation-iteration-count | 指定在停止之前動(dòng)畫循環(huán)應(yīng)播放的次數(shù)。 |
| animation-direction | 指定動(dòng)畫是否應(yīng)在交替的循環(huán)中反向播放。 |
| animation-fill-mode | 指定CSS動(dòng)畫在執(zhí)行之前和之后應(yīng)如何將樣式應(yīng)用于其目標(biāo)。 |
| animation-play-state | 指定動(dòng)畫是運(yùn)行還是暫停。 |
| @keyframes | 指定動(dòng)畫期間各個(gè)點(diǎn)的動(dòng)畫屬性的值。 |