一、概述

CSS3的animation屬性可以像flash製作動畫一樣，通過關鍵幀控制動畫的每一步，實現更為複雜的動畫效果。使用方法：

1）利用@keyframes宣告一個關鍵幀組。

2）在animation屬性中呼叫上述宣告的的關鍵幀組，來實現動畫。

程式碼:

效果

變換成:

二、animation屬性的值：
1）animation-name：指定一個關鍵幀動畫的名字，由@keyframes宣告。

當值為none時（預設值），將沒有任何動畫效果，其可以用於覆蓋任何動畫。

2）animation-duration：動畫持續時間，單位為s或ms，一般使用秒

3）animation-timing-function：動畫的播放方式函式：linear、ease-in等

4）animation-delay：動畫開始之前的延遲時間

5）animation-iteration-count：指定動畫的迴圈次數

取值一般為整數，預設值為1，即只播放一次，如果取值為infinite，動畫將會無限次地播放。

6）animation-direction：動畫的播放方向。

預設值為normal，即動畫每次迴圈都向前播放，取值為alternate時，動畫播放為偶數次則向前播放，為奇數次則反方向播放，例如一個反覆的彈跳動畫。。。

7）animation-play-state：用來控制動畫的播放狀態。

主要值有兩個：running和paused。running為預設值，可以通過paused將正在播放的動畫停止，可以通過running將暫停的動畫播放。

8）animation-fill-mode：用來設定動畫的時間外屬性

其用四個值：none、forwards、backwards和both。

預設值為none，表示動畫正常開始，結束後樣式回到初始樣式（animation屬性之外的樣式）

取值為forwars時，動畫結束後，樣式保持為最後一幀的樣式（100%時）。

取值為backwards時，當有delay屬性時，可以迅速將第一幀的樣式應用到動畫元素，而不是開始動畫時才將第一幀的樣式應用到動畫元素，當然，delay為0時看不出效果。

取值為both時，讓動畫元素同時有forwards和backws兩種屬性效果。