最近在面試的時候被面試官問到「如何使用css3 animation 來實現乙個動畫的逐幀檢測」，自己支支吾吾的回答了下， 下來之後趕緊查了下api文件，以及翻閱了一些部落格後，對其有了如下的整理。
關於animation的一寫屬性值，我們可以在w3c、 菜鳥教程上面自行查閱。
在了解了animation的屬性後，我們可以自己寫乙個動畫跑起來觀察下效果，了解下其過程，**如下：
在這個gif圖裡面，我們可以明顯的看出來，動畫每一幀之間的跑動都是平滑的，這是因為在animation屬性中，預設以ease(平滑)的方式進行過渡，當然這並不是我們想要的結果，我們需要在每一幀中間自己來手動過渡，解決的方法如下：
@keyframes run
9.2%，17.2%
}
從這幅圖我們清楚，逐幀動畫就是通過一幀一幀的顯示動畫的影象序列，利用人的視覺暫留原地而實現運動的，了解了其原理，我們可以利用以上的方法來實現如下的**：
那麼現在這個效果也就是我們所需要的，其將十二幅影象序列展示成動畫效果。
這個方式是在乙個部落格裡面看到的，但真的很好用。
**如下：
css3 animation基礎屬性
animation下的屬性 name duration animation timing function 運動方式 animation delay 延遲時間 animation iteration count 迴圈的次數infinite 無限迴圈也可以填寫數字 animation directio...
css3 animation（動畫）屬性
css3 animation 動畫 屬性 1.animation name duration timing function delay iteration count direction fill mode play state 所有屬性集合 2.animation name屬性值 繫結動畫名 k...
CSS3 animation屬性介紹
css3 animation動畫 css3除了transition屬性，還可以使用animation功能實現複雜的動畫效果。要建立animation動畫，先要了解 keyframes規則。css3 keyframes關鍵幀 使用 keyframes建立動畫。在動畫過程中，可以多次改變css的樣式，指...