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; } 
}

看到火柴人在这里跑！

供应商前缀友好版本

stick_man喜欢以固定像素运行（看看他看起来有多高兴！）。 不幸的是，他不是很乐于积极响应。

我想要的是能够通过百分比缩放图像，并使动画与上面使用固定像素的示例一样流畅。

我试过了：

• 乱七八糟的background-size （使用百分比而不是像素）
• 弄乱background-position （使用百分比而不是像素）
• 将stick_man放入容器中，然后改变容器大小

除此之外，我一直在研究高度，宽度，背景尺寸和背景位置，以查看是否可以得到黄金分割率，但到目前为止还没有运气。

这是失败尝试的示例！

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

Answer 1

在这个困境中暴露了一个大陷阱。 显然，当使用CSS3 steps和百分比background-position ，最后一步是截止且未显示。

我在网上其他地方能找到的唯一描述此文档的是Rachel Nabor的codepen

因此，考虑到这个多余的帧被切除，我将最终关键帧的background-position为112.5% （8个步骤，因此在末尾添加一个额外的步骤）。

看来这已解决了问题。 稍微摆弄一下，我应该有可行的解决方案：

小提琴