keyframes關鍵幀

其實對于“幀”這個概念平時接觸是比較多的，比如電影或錄制視頻都會有“幀”的概念。下面我們就一起來看看動畫中的這個keyframes是什么東西。前面我們在使用transition制作一個簡單的transition效果時，我們包括了初始屬性和最終屬性，一個開始執行動作時間和一個延續動作時間以及動作的變換速率，其實這些值都是一個中間值，如果我們要控制的更細一些，比如說我要第一個時間段執行什么動作，第二個時間段執行什么動作（換到flash中說，就是第一幀我要執行什么動作，第二幀我要執行什么動作），這樣我們用transition就很難實現了，此時我們也需要這樣的一個“關鍵幀”來控制。那么CSS3的animation就是由“keyframes”這個屬性來實現這樣的效果，在CSS3中使用@keyframes規則來創建動畫，kyeframes可以設置多個關鍵幀，每個關鍵幀表示動畫過程中的一個狀態。@keyframes規則的語法格式如下：

在上面的語法格式中，animationname表示當前動畫的名稱，它將作為引用時的唯一標識，不能為空。keyframes-selector是關鍵幀選擇器，即指定當前關鍵幀要應用到整個動畫過程中的位置值是一個百分比，from或者to。其中from或0%效果相同表示動畫的開始，to和100%效果相同表示動畫的結束。css-styles定義執行到當前關鍵幀時對應的動畫狀態，以上3個屬性都是必需的，缺一不可。

通過案例6-15來體驗應用CSS3的animation屬性和關鍵幀@keyframes來完成一個簡單的div移動和變色的效果。

先完成一個基本的頁面，繪制一個div，寬度和高度為300，初始時在屏幕左上角，背景色為紅色，在2s的時間內向右移動500px，并且背景色變為藍色，代碼如下

例6-15   example15.html

打開瀏覽器，運行代碼，經過2s后，div往右移動500px，并且背景色變成了藍色，整個背景色的變換過程非常平滑，而不是很生硬地直接變過去。