動畫是CSS3中具有顛覆性的特徵之一，可通過設定多個節點來精確控制一個或一組動畫，常用來實現複雜的動畫效果。

動畫序列

• 0%是動畫的開始，100%是動畫的完成。這樣的規則就是動畫序列。

• 在@keyframes中規定某項css樣式，就能建立由當前樣式逐漸改變為新樣式的動畫效果

• 動畫是使元素從一種樣式逐漸變化為另一種樣式的效果，可以改變任意多的樣式任意多的次數。

• 用百分比來規定變化發生的時間，或用關鍵詞"form"和"to"，等同於0%和100%。

動畫基本使用

1. 先定義動畫

2. 再呼叫動畫

動畫簡寫格式：

animation:動畫名稱 動畫時間 運動曲線  何時開始  播放次數  是否反方向 動畫起始或結束方向;
 

屬性	描述
@keyframes	規定動畫。
animation	所有動畫屬性的簡寫屬性，除了animation-play-state屬性。
animation-name	規定@keyframes動畫的名稱。（必須的）
animation-duration	規定動畫完成一個週期所花費的秒或毫秒，預設是0。（必須的）
animation-timing-function	規定動畫的速度曲線，預設是“ease”。
animation-delay	規定動畫何時開始，預設是0。
animation-iteration-count	規定動畫被播放的次數，預設是1，還有infinite
animation-direction	規定動畫是否在下一週期逆向播放，預設是“normal“,alternate逆播放
animation-play-state	規定動畫是否正在執行或暫停。預設是"running",還有"paused"。
animation-fill-mode	規定動畫結束後狀態，保持forwards回到起始backwards

• 簡寫屬性裡面不包含 animation-play-state

• 暫停動畫：animation-play-state: puased; 經常和滑鼠經過等其他配合使用

• 想要動畫走回來 ，而不是直接跳回來：animation-direction ： alternate

• 盒子動畫結束後，停在結束位置： animation-fill-mode ： forwards

速度曲線細節

animation-timing-function：規定動畫的速度曲線，預設是“ease”

值	描述
linear	動畫從頭到尾的速度是相同的。勻速
ease	預設。動畫以低速開始，然後加快，在結束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束。
steps()	指定了時間函式中的間隔數量（步長）

關於幾個值，除了名字，動畫時間，延時有嚴格順序要求，其它隨意

@keyframes 動畫名稱 {
from{ 開始位置 } 0%
to{ 結束 } 100%
}

animation-iteration-count:infinite; 無限迴圈播放
animation-play-state:paused; 暫停動畫

小熊案例：

div{ position:absolute; width:200px; height:100px; background:url(images/bear.png)no-repeat; /*animation:動畫名稱動畫時間運動曲線何時開始播放次數是否反方向;*/ /*元素可新增多個動畫，用逗號分隔*/ /*steps(步數)，動畫分幾步完成*/ animation:run0.5ssteps(8)infinite,move3slinearforwards; }
@keyframesrun{ 0%{ background-position:00; } 100%{ background-position:-1600px0; } } @keyframesmove{ 0%{ left:0; } 100%{ left:50%; transform:translateX(-50%); } }