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。
一、animation-name:
語法：
animation-name: none | IDENT[,none | IDENT]*;
取值說明：
animation-name:是用來定義一個動畫的名稱
二、animation-duration：
語法：
animation-duration: <time>[,<time>]*
取值說明：
animation-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:是指元素根據時間的推進來改變屬性值的變換速率，說得簡單點就是動畫的播放方式
四、animation-delay:
語法：
animation-delay: <time>[,<time>]*
取值說明：
animation-delay:是用來指定元素動畫開始時間。
五、animation-iteration-count
語法：
animation-iteration-count:infinite | <number> [, infinite | <number>]*
取值說明：
animation-iteration-count是用來指定元素播放動畫的循環次數
六、animation-direction
語法：
animation-direction: normal | alternate [, normal | alternate]*
取值說明：
animation-direction是用來指定元素動畫播放的方向
七、animation-play-state
語法：
animation-play-state:running | paused [, running | paused]*
取值說明：
animation-play-state主要是用來控制元素動畫的播放狀態。
參考鏈接：http://www.w3cplus.com/content/css3-animation
css3 animation(動畫)筆記