css3裡面的animation屬性非常強大，但是自己用的比較少，最近有次面試就剛好被問到了，趁現在有時間就對animation做乙個小總結。同時實現乙個逐幀動畫的demo作為練習
animation屬性一覽
因為animation屬性比較多，然後在w3c上看有點蛋疼，乾脆也做了乙份導圖，以後想檢視，就一目了然了
使用animation實現逐幀動畫
熟悉了animation的屬性之後，得找個簡單的小專案實現下，逐幀動畫好有意思，先跑乙個滿足下自己
思路很簡單，就是給元素乙個雪碧圖的背景，然後新增的幀動畫更改background-position，關鍵**：
css code複製內容到剪貼簿
但是跑起來後我們發現，每幀動畫之間幀動畫都是滑動，並不是我們要的效果,為什麼呢？
原來animation預設以ease方式過渡，它會在每個關鍵幀之間插入補間動畫，所以動畫效果是連貫性的
知道原因就好辦了，解決思路就是：
css code複製內容到剪貼簿
step1：動作之間停留8幀，0%設定動作一，動作一結束在8%
step2：動作之間過渡1.2幀，9.2%設定動作二，動作二結束在17.2%
完整**：
xml/html code複製內容到剪貼簿
還有另外乙個實現方法，就是利用steps(),就是幀之間的階躍動畫，這個在w3c裡面沒有寫，先貼個圖
由上圖可知:
steps(1,start):動畫一開始就跳到 100% 直到這一幀（不是整個週期）結束
steps(1,end):保持 0% 的樣式直到這一幀（不是整個週期）結束
另外也可以直接設定 animation-timing-function:step-start/step-end
step-start效果等同於steps(1,start)，step-end效果等同於steps(1,end)
最終效果，因為錄製的問題可能有點卡頓，有興趣的同學可以直接複製**去跑下：
完整**：
xml/html code複製內容到剪貼簿
原文位址：
本文標題: css3 animation實現逐幀動畫效果
本文位址:
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的樣式，指...