動畫(Animation)，表示兩個狀態之間平滑過渡的效果。由動畫屬性和關鍵幀組成

動畫屬性

animation-name: 動畫名稱(預設值為none)
animation-duration: 持續時間(預設值為0)
animation-timing-function: 時間函式(預設值為ease)
animation-delay: 延遲時間(預設值為0)
animation-iteration-count: 迴圈次數(預設值為1)
animation-direction: 動畫方向(預設值為normal)
animation-play-state: 播放狀態(預設值為running)
animation-fill-mode: 填充模式(預設值為none)
 

1. 動畫名稱

動畫名稱(Animation-name)，表示關鍵幀(Key-frames)定義時的名字。

2. 動畫時間

動畫時間(Animation-duration)，表示一次動畫的持續時間，跟過渡裡的transition-duration差不多；

3. 動畫函式

動畫函式(Animation-timing-function)，表示動畫的時間函式，跟過渡的transition-timing-function差不多；

4. 動畫延遲

動畫延遲(Animation-delay)，表示動畫延遲指定時間後開始，跟過渡的transition-delay差不多；

5. 動畫次數

動畫次數(Animation-iteration-count)，表示動畫執行的次數,infinite

6. 動畫方向

動畫方向(Animation-direction)，表示動畫開始的位置，如從開始位置開始或從結束位置開始；

7. 動畫狀態

動畫狀態(Animation-play-state)，表示動畫的播放狀態，如繼續或暫停；

8. 動畫模式

動畫模式(Animation-fill-mode)，表示動畫的填充模式；

關鍵幀

關鍵幀(keyframes)，表示單次動畫的執行動作。

.animation {
    animation: AnimationName 2s ease 0s infinite;
}
@keyframes AnimationName {
    /* from等於0%*/
    from {width:0;}
    /* to等於100% */
    to {width: 100px;}
}