現在經常會看到一些門戶網站的專題使用到CSS3的動畫，咋也不能落伍，在此這梳理下動畫知識吧，便于后面用到。接下來介紹下Animation動畫的定義和調用，在介紹Animation之前需要了解下Keyframes，英文意思就是關鍵幀，它相當于我們flash里面的幀。

Keyframes具有其自己的語法規則，他的命名是由"@keyframes"開頭，后面緊接著是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式 規則，有點像我們css的樣式寫法一樣。對于一個"@keyframes"中的樣式規則是由多個百分比構成的，如“0%”到"100%"之間，我們可以在 這個規則中創建多個百分比，我們分別給每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，比如說移動，改變元素 顏色，位置，大小，形狀等，不過有一點需要注意的是，我們可以使用“fromt”“to”來代表一個動畫是從哪開始，到哪結束，也就是說這個 "from"就相當于"0%"而"to"相當于"100%",值得一說的是，其中"0%"不能像別的屬性取值一樣把百分比符號省略，我們在這里必須加上百 分符號（“%”）如果沒有加上的話，我們這個keyframes是無效的，不起任何作用。因為keyframes的單位只接受百分比值。

Keyframes可以指定任何順序排列來決定Animation動畫變化的關鍵位置。其具體語法規則如下：

 keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}'; keyframes-blocks: [ keyframe-selectors block ]* ; keyframe-selectors: [ 'from'  'to'  PERCENTAGE ] [ ',' [ 'from'  'to'  PERCENTAGE ] ]*;

none:表示不進么變換；<transform-function>表示一個或多個變換函數，以空格分開；換句話說就是我們同時對一 個元素進行transform的多種屬性操作，例如rotate、scale、translate三種，但這里需要提醒大家的，以往我們疊加效果都是用逗 號（“，”）隔開，但transform中使用多個屬性時卻需要有空格隔開。大家記住了是空格隔開。

取值：

transform屬性實現了一些可用SVG實現的同樣的功能。它可用于內聯(inline)元素和塊級(block)元素。它允許我們旋轉、縮放 和移動元素 ，他有幾個屬性值參數：rotate;translate;scale;skew;matrix。下面我們分別來介紹這幾個屬性值參數的具體使用方法：

我把上面的語法綜合起來

  @keyframes IDENT {     from {              Properties:Properties value;     }     Percentage {            Properties:Properties value;     }     to {            Properties:Properties value;     }   }

其中IDENT是一個動畫名稱，你可以隨便取，當然語義化一點更好，Percentage是百分比值，我們可以添加許多個這樣的百 分比，Properties為css的屬性名，比如說left,background等，value就是相對應的屬性的屬性值。值得一提的是，我們 from和to 分別對應的是0%和100%。這個我們在前面也提到過了。到目前為止支技animation動畫的只有webkit內核的瀏覽器，所以我需要在上面的基礎 上加上-webkit前綴，據說Firefox5可以支持css3的 animation動畫屬性。

舉個官方實例來，大伙就可以看得很清楚了，如下：

@-webkit-keyframes 'wobble' {     0% {        margin-left: 100px;        background: green;     }     40% {        margin-left: 150px;        background: orange;     }     60% {        margin-left: 75px;        background: blue;     }     100% {        margin-left: 100px;        background: red;     }  }

這里我們定義了一個叫“wobble”的動畫，他的動畫是從0%開始到100%時結束，從中還經歷了一個40%和60%兩個過程，上面代碼具體意思 是：wobble動畫在0%時元素定位到left為100px的位置背景色為green，然后40%時元素過渡到left為150px的位置并且背景色為 orange，60%時元素過渡到left為75px的位置,背景色為blue，最后100%結束動畫的位置元素又回到起點left為100px處,背景 色變成red。

定義好動畫，如何調用呢，如下：

.box {     width: 50px;     height: 50px;     margin-left: 100px;     background: blue;     -webkit-animation-name:'wobble';/*動畫屬性名，也就是我們前面keyframes定義的動畫名*/     -webkit-animation-duration: 10s;/*動畫持續時間*/     -webkit-animation-timing-function: ease-in-out; /*動畫頻率，和transition-timing-function是一樣的*/     -webkit-animation-delay: 2s;/*動畫延遲時間*/     -webkit-animation-iteration-count: 10;/*定義循環資料，infinite為無限次*/     -webkit-animation-direction: alternate;/*定義動畫方式*/  }

可能大伙看到上面不是很了解，我們看下其屬性的語法，再回來看這個例子就很清楚了

一、animation-name:

語法：

  animation-name: none  IDENT[,none  IDENT]*;

取值說明：

animation-name:是用來定義一個動畫的名稱，其主要有 兩個值：IDENT是由Keyframes創建的動畫名，換句話說此處的IDENT要和Keyframes中的IDENT一致，如果不一致,將不能實現任 何動畫效果；none為默認值，當值為none時，將沒有任何動畫效果。另外我們這個屬性跟前面所講的transition一樣，我們可以同時附幾個 animation給一個元素，我們只需要用逗號“，”隔開。

二、animation-duration：

語法：

  animation-duration: <time>[,<time>]*

取值說明：

animation-duration是用來指定元素播放動畫所持續的時間長，取值:<time>為數值，單位為s （秒.）其默認值為“0”。這個屬性跟transition中的transition-duration使用方法是一樣的。

三、animation-timing-function:

語法：

   animation-timing-function:ease  linear  ease-in  ease-out  ease-in-out  cubic-bezier(<number>, <number>, <number>, <number>) [, ease  linear  ease-in  ease-out  ease-in-out  cubic-bezier(<number>, <number>, <number>, <number>)]*

 取值說明：

animation-timing-function:是指元素根據時間的推進來改變屬性值的變換速率，說得簡單點就是動畫的播放方式。他和transition中的transition-timing-function一樣，具有以下六種變換方式：ease;ease-in;ease-in-out;linear;cubic-bezier。具體的使用方法如下：

transition-timing-function的值允許你根據時間的推進去改變屬性值的變換速率，transition-timing-function有6個可能值：

1、ease：（逐漸變慢）默認值，ease函數等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).

2、linear：（勻速），linear 函數等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函數等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).

4、ease-out：（減速），ease-out 函數等同于貝塞爾曲線(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后減速），ease-in-out 函數等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（該值允許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定于曲線上點P1和點P2。所有值需在[0, 1]區域內，否則無效。

其是cubic-bezier為通過貝賽爾曲線來計算“轉換”過程中的屬性值，如下曲線所示，通過改變P1(x1, y1)和P2(x2, y2)的坐標可以改變整個過程的Output Percentage。初始默認值為default.

四、animation-delay:

語法：

  animation-delay: <time>[,<time>]*

 取值說明：

animation-delay:是用來指定元素動畫開始時間。取值為<time>為數值，單位為s(秒)，其默認值也是0。這個屬性和transition-delayy使用方法是一樣的。

五、animation-iteration-count

語法：

  animation-iteration-count:infinite  <number> [, infinite  <number>]*

 取值說明：

animation-iteration-count是用來指定元素播放動畫的循環次數，其可以取值<number>為數字，其默認值為“1”；infinite為無限次數循環。

六、animation-direction

語法：

  animation-direction: normal  alternate [, normal  alternate]*

取值說明：

animation-direction是用來指定元素動畫播放的方向，其只有兩個值，默認值為normal，如果設置為normal時，動畫的每次循環都是向前播放；另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。

七、animation-play-state

語法：

   animation-play-state:running  paused [, running  paused]*

 取值說明：

animation-play-state主要是用來控制元素動畫的 播放狀態。其主要有兩個值，running和paused其中running為默認值。他們的作用就類似于我們的音樂播放器一樣，可以通過paused將 正在播放的動畫停下了，也可以通過running將暫停的動畫重新播放，我們這里的重新播放不一定是從元素動畫的開始播放，而是從你暫停的那個位置開始播 放。另外如果暫時了動畫的播放，元素的樣式將回到最原始設置狀態。這個屬性目前很少內核支持，所以只是稍微提一下。

上面我們分別介紹了animation中的各個屬性的語法和取值，那么我們綜合上面的內容可以給animation屬性一個速記法：

  animation:[<animation-name>  <animation-duration>  <animation-timing-function>  <animation-delay>  <animation-iteration-count>  <animation-direction>] [, [<animation-name>  <animation-duration>  <animation-timing-function>  <animation-delay>  <animation-iteration-count>  <animation-direction>] ]*

 如下圖所示

相信大家看完語法后，應該對于上面的例子很清楚了吧。不過話說回來動畫是可以做了，但兼容它的瀏覽器不多啊，目前只有蘋果，谷歌，火狐支持。

講解CSS3中常用的Animation動畫的定義和語法調用文章就講到這里，歡迎瀏覽本站的其它內容，點擊這里返回首頁