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扔进容器，然后改变容器大小<​​/ li>

除了那个刚刚玩高度，宽度，背景大小和背景位置，看看我是否能得到黄金比例，但到目前为止还没有运气。

Here's an example of a failed attempt!

请提供CSS3答案。我将使用一些JavaScript（添加类和诸如此类）接受答案，但我正在寻找使用纯CSS3动画的解决方案。

Answer 1

这种困境暴露出来了。显然，当使用CSS3 steps和百分比background-position时，最后一步是截止的，不会显示。

我在网络上其他地方可以找到的唯一文档是Rachel Nabor's codepen

因此，考虑到这个额外的帧被截断，我将最终的关键帧设置为background-position 112.5%（8个步骤，因此最后添加一个额外的步骤）。

这似乎解决了这个问题。随着一点点摆弄，我应该有我可行的解决方案：

FIDDLE