by 接著上次講的@keyframe動畫，有時候我們會需要類似GIF圖片一樣的動態效果，而這個效果CSS3也是可以實現的。
首先我們先來準備一張Sprite圖（圖片來源）
人物走路的分解圖共有12張，每一張的寬度為140px，總長度為1680px.
接著我們來設定@keyframes動畫以及人物sprite：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style type="text/css"> @keyframes run { 0% { background-position: 0 0; } 100% { background-position: -1680px 0; } } #sprite { width: 140px; height: 140px; background: url("sprites.png") 0 0 no-repeat; animation: run 1.4s steps(12) infinite; } </style> |
animation: run 1.4s steps(12) infinite的意思是：
執行run動畫，動畫時間1.4秒，分為12步，無限循環。
效果圖：
參考資料：