透過先前的學習我們知道，利用transition 屬性可以實現簡單的過渡動畫，但過渡動畫只能指定開始和結束兩個狀態，整個過程都是由特定的函數來控制的，不是很靈活。本節我們再來介紹一種更為複雜的動畫— animation。
動畫（animation）：和過渡類似，都是可以實現一些動態的效果，不同的是過渡需要在某個屬性發生變化時才可以觸發，而動畫效果則可以自動觸發動態效果。設定動畫效果必須先設定一個關鍵幀，關鍵幀設定了動畫執行的每個步驟。關鍵影格設定的格式如下：
<style>/*定義動畫關鍵幀，關鍵幀的名字為test*/@keyframestest{/*from表示動畫的開始位置，也可以使用0%來表示。 */from{margin-left:0;}/*to表示動畫的結束位置，也可以使用100%來表示。 */to{margin-left:100%;}}</style>CSS 中的動畫類似於flash 中的逐幀動畫，表現細膩且非常靈活，使用CSS 中的動畫可以取代許多網頁中的動態圖像、Flash 動畫或JavaScript 實現的特殊效果。
動畫就是將元素從一種樣式逐漸改變為另一種樣式的效果。我們可以改變任意多的樣式任意多的次數（很官方的回答）。
CSS3animation（動畫）屬性。
@keyframes
透過@keyframes 規則，我們可以創建動畫。
創建動畫的原理是，將一套CSS 樣式逐漸變化為另一套樣式。在動畫過程中我們能夠多次改變這套CSS 樣式。以百分比來規定改變發生的時間，或透過關鍵字“from” 和“to”，等價於0% 和100%。
0% 是動畫的開始時間，100% 動畫的結束時間。為了獲得最佳的瀏覽器支持，我們應該始終定義0% 和100% 選擇器。這裡面0%就是一幀，50%是一幀，100%也是一幀。
最後，請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定
animationname 必填。定義動畫的名稱。
keyframes-selector必備。動畫時長的百分比合法的值：0-100%from（與0%相同）to（與100%相同）
css-styles 必需。一個或多個合法的CSS 樣式屬性
舉個例子：
@keyframesname{0%{top:0px;left:0px;background:red;}25%{top:0px;left:100px;background:blue;}50%{top:100px;le ft:100px;background:yellow;}75%{top:100px;left:0px;background:green;}100%{top:0px;left:0px;background:red;}}1. animation-name屬性：設定需要綁定到元素的動畫名稱。
animation-name 屬性用來將動畫綁定到指定的HTML 元素，屬性的可選值如下：
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75%{top:200px;left:0px;}100%{top:0px;left :0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position:relative;animation-name:ball;}</style></head><body><div ></div></body></html>運行結果：
注意：要想讓動畫成功播放，您還需要定義animation-duration 屬性，否則會因為animation-duration 屬性的預設值為0，導致動畫並不會播放。
2. animation-duration屬性：定義動畫完成一個週期需要多少秒或毫秒。
● time：指定動畫播放完成花費的時間。預設值為0， 表示沒有動畫效果。
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left :350px;}50%{top:200px;left:350px;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{ width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position:relative;animation-name:ball;animation-duration:2s;}</style></head><body><div> </div></body></html>3. animation-timing-function：使用的數學函數，稱為三次貝塞爾曲線、速度曲線。使用此函數，你可以使用自己的值，或使用預先定義的值之一。
●linear：動畫從頭到尾的速度是相同的；
●ease：預設。動畫從低開始，然後加快，在結束之前變慢；
●ease-in：動畫以低速開始；
●ease-out：動畫以低速結束；
●ease-in-out：動畫以低速開始和結束；
●cubic-bezier（n,n,n,n）：使用cubic-bezier() 函數來定義動畫的播放速度，參數的值範圍為0 到1 之間的數值。
4. animation-delay屬性：定義動畫什麼時候開始。
●time：可選。定義動畫開始前等待的時間，以秒或毫秒計。預設值為0。
注意：單位可以說秒（s）或毫秒（ms）。
5. animation-iteration-count屬性：定義動畫應該播放幾次。
屬性的可選值如下：
6. animation-direction屬性：定義是否循環交替反向播放動畫。
●normal：預設值。動畫正常播放；
●reverse：動畫反向播放；
●alternate：動畫在奇數次（1、2、5…）正向播放，在偶數次（2、4、6…）反向播放；
●alternate-reverse：動畫在奇數次（1、3、5…）反向播放，在偶數次（2、4、6…）正向播放。
7. animation-fill-mode 屬性：規定動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要套用到元素的樣式。
注意：預設情況下，CSS 動畫在第一個關鍵影格播放完之前不會影響元素，在最後一個關鍵影格完成後停止影響元素。 animation-fill-mode 屬性可重寫該行為。
●none 預設值。 ：動畫在動畫執行之前和之後不會套用任何樣式到目標元素；
●forwards：在動畫結束後（由animation-iteration-count 決定），動畫將套用該屬性值；
●backwards ：動畫將套用在animation-delay 定義期間啟動動畫的第一次迭代的關鍵影格中定義的屬性值。這些都是from 關鍵影格中的值（當animation-direction 為「normal」 或「alternate」 時）或to 關鍵影格中的值（當animation-direction 為「reverse」 或「alternate-reverse」 時）；
●both 動畫遵循forwards 和backwards 的規則。也就是說，動畫會在兩個方向上擴展動畫屬性。
8.animation-play-state：指定動畫是否正在運作或已暫停。
●paused：指定暫停動畫；
●running：指定正在執行的動畫。
9. initial：設定屬性為其預設值。
●initial：關鍵字用來設定CSS 屬性為它的預設值；
●initial：關鍵字可用於任何HTML 元素上的任何CSS 屬性。
10. inherit：從父元素繼承屬性。
●inherit：關鍵字指定一個屬性應從父元素繼承它的值；
●inherit：關鍵字可用於任何HTML 元素上的任何CSS 屬性。
animation
animation 屬性是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state 幾個屬性的簡寫形式，透過animation 屬性可以同時定義上述的多個屬性，語法格式如下：
animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state;
其中每個參數分別對應上面介紹的各個屬性，如果省略其中的某個或多個值，則會使用該屬性對應的預設值。
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>動畫</title><style>.box1{width:700px;height:500px;background-color:silver;}. box2{width:100px;height:100px;background-color:#bfa;margin-left:10px;/*animation-name:test;*//*animation-duration:4s;*//*animat ion-timing-function:linear;*//*animation-iteration-count:4;*//*animation-direction:alternate;*//*animation-fill-mode:backwards ;*//*animation-delay:2s;*/animation:test2slinear1s4alternate;}/*定義動畫關鍵幀，關鍵幀的名字為test*/@keyframestest{/*from表示動畫的開始位置，也可以使用0%來表示。 */from{margin-left:50px;background-color:orange;}/*to表示動畫的結束位置，也可以使用100%來表示。 */to{margin-left:600px;background-color:yellow;}}/*控制動畫的運行*//*.box1:hover.box2{animation-play-state:paused;}*/</style> </head><body><div><div></div></div></body></html>