在開始介紹Animation之前我們有必要先來了解一個特殊的東西，那就是”Keyframes”,我們把他叫做“關鍵幀”，玩過flash的朋友可能對這個東西并不會陌生。下面我們就一起來看看這個“Keyframes”是什么東西。前面我們在使用transition制作一個簡單的transition效果時，我們包括了初始屬性和最終屬性，一個開始執行動作時間和一個延續動作時間以及動作的變換速率，其實這些值都是一個中間值，如果我們要控制的更細一些，比如說我要第一個時間段執行什么動作，第二個時間段執行什么動作（換到flash中說，就是第一幀我要執行什么動作，第二幀我要執行什么動作），這樣我們用Transition就很難實現了，此時我們也需要這樣的一個“關鍵幀”來控制。那么CSS3的Animation就是由“keyframes”這個屬性來實現這樣的效果。下面我們一起先來看看Keyframes:

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

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

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表