css3 animation(動畫)筆記

在開始介紹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能夠指定任何順序排列來決定Animation動畫變化的關鍵位置。其具體語法規則以下：

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

keyframes實例：

@-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; } }

animation主要有如下幾種：animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。

1、animation-name:

語法：

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

取值說明：

animation-name:是用來定義一個動畫的名稱

2、animation-duration：

語法：

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

取值說明：

animation-duration是用來指定元素播放動畫所持續的時間長

3、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:是指元素根據時間的推動來改變屬性值的變換速率，說得簡單點就是動畫的播放方式

4、animation-delay:

語法：

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

取值說明：

animation-delay:是用來指定元素動畫開始時間。

5、animation-iteration-count

語法：

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

取值說明：

animation-iteration-count是用來指定元素播放動畫的循環次數

6、animation-direction

語法：

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

取值說明：

animation-direction是用來指定元素動畫播放的方向

7、animation-play-state

語法：

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

取值說明：

animation-play-state主要是用來控制元素動畫的播放狀態。

 

參考連接：http://www.w3cplus.com/content/css3-animation