CSS3動畫縮放背景圖片精靈

Question

所以，我已經有了一個stick_man，他喜歡跑：

.stick_man { 
    -webkit-animation: walk-cycle 1s steps(8) infinite; 
    background: url(http://rmorochove.files.wordpress.com/2012/01/player-running-spritesheet9x81.png) 0 0 no-repeat; 
    height: 343px; 
    width: 198px; 
    margin: 20px; 
} 

@-webkit-keyframes walk-cycle { 
    0% {background-position: 0 0; } 
    100% {background-position: 0 -2719px; } 
} 

See Stickman Run Here!

Vendor-Prefix Friendly Version

的stick_man喜歡在固定的像素運行（看看如何他看起來很開心！）。不幸的是，他沒有如此高興地運行。

我想要的是能夠通過百分比縮放圖像，並使動畫與上述使用固定像素的示例一樣流暢。

我已經試過：

• 與background-size瞎搞（使用百分比而不是像素）
• 與background-position亂搞（使用百分比而不是像素）
• 折騰stick_man到容器內，然後改變容器尺寸

除了剛剛玩過的高度，寬度，背景s ize和background-position來看看我能否得到黃金比例，但到目前爲止沒有運氣。

Here's an example of a failed attempt!

請提供一個CSS3的答案。我會接受使用一些JavaScript（添加類和whatnot）的答案，但我正在尋找一個使用純CSS3動畫的解決方案。

Answer 1

在這裏暴露出一個大難題。很顯然，當使用CSS3 steps和百分比background-position時，最後一步是截止並未顯示。

我能找到描述這個在網絡上其他地方的唯一文檔是Rachel Nabor's codepen

那麼佔這個額外的框架被切斷，我設定的最後關鍵幀的background-position112.5%（8個步驟，因此增加一個額外最後一步）。

看來這已解決了這個問題。有一點擺弄，我應該有我可行的解決方案：

FIDDLE