在開始介紹Animation之前我們有必要先來了解一個特殊的東西，那就是"Keyframes",我們把他叫做“關鍵幀”，玩過flash的朋友可能對這個東西并不會陌生。下面我們就一起來看看這個“Keyframes”是什么東西。

前面我們在使用transition制作一個簡單的transition效果時，我們包括了初始屬性和最終屬性，一個開始執行動作時間和一個延續動作時間以及動作的變換速率，其實這些值都是一個中間值，如果我們要控制的更細一些，比如說我要第一個時間段執行什么動作，第二個時間段執行什么動作（換到flash中說，就是第一幀我要執行什么動作，第二幀我要執行什么動作），這樣我們用Transition就很難實現了，此時我們也需要這樣的一個“關鍵幀”來控制。那么CSS3的Animation就是由“keyframes”這個屬性來實現這樣的效果。

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

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

上面的語法綜合起來

@keyframes IDENT {from {Properties:Properties value;}Percentage {Properties:Properties value;}to {Properties:Properties value;}}或者全部寫成百分比的形式：@keyframes IDENT {0% {Properties:Properties value;}Percentage {Properties:Properties value;}100% {Properties:Properties value;}}

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

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

一、animation-name:

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

二、animation-duration：

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

三、animation-timing-function:

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

四、animation-delay:

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

五、animation-iteration-count

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

六、animation-direction

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

七、animation-play-state

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

參考網址A

轉載于:https://www.cnblogs.com/mcat/p/4845587.html

總結

以上是生活随笔為你收集整理的CSS-3 Animation 的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。