CSS Sprite 动画无法按预期工作

Question

我正在使用这段代码，但单位不同:

-webkit-animation: play .8s steps(10) infinite;

和

@-webkit-keyframes play {
    from { background-position:    0px; }
    to { background-position: -500px; }
}

见 http://jsfiddle.net/simurai/CGmCe/light/

但我一直在使用以下代码获取横向滚动图像:

$('html > head').append("<style class='"+name+" animation'>@-webkit-keyframes "+name+" {from {background-position:"+start+"px -"+y+"px;} to{ background-position: -"+end+"px -"+y+"px; }} ."+name+"{background-image: url(assets/images/"+image+".png); -webkit-animation: "+name+" "+duration+"s steps("+current_key.length+") infinite; width:"+w+"px; height: "+h+"px;}</style>");

我的意思是，图像不会改变，它会随着时间的推移在其他图像上滚动，我正在尝试将 CSS 动画用于游戏的 Sprite 表动画。

我在其他地方找不到问题，也许我搜索错了。感谢阅读!

Answer 1

您的代码与原始代码之间的区别在于，在原始代码中， Sprite 已经一直向左移动，因此当 Sprite 滚动时，您永远看不到下一张图的白色部分，因此看起来不像滚动，如果你设置 from {background-position:100px;} 你会看到滚动，我相信你会更好地理解我，我也只尝试在原始代码中使用不同的值但是如果你放 4 步而不是 10 步，虽然您不会看到完整的动画，但您会看到足够接近的动画，您也可以使用 9 步，稍后我会再看一遍，看看是否可以为您提供更好的答案。它可能对你有帮助这是 fork 的 jsfiddle所以你可以看看它。

编辑:

在更仔细地查看动画属性后，特别是 steps 函数，我意识到它将图像的宽度 (50px) 移动了步数 (10)，从而为我们提供了我们想要移动的 -500px。因此，例如，如果您想让 Sprite 300px 向右移动，则必须像这样更改动画代码:

@-webkit-keyframes play {
from { background-position:    300px; }
to { background-position: -200px; }
}

取而代之的是 -500px，因为这样你已经移动了 300px，所以你只需要移动你剩下的 -200px。因此，总结更改这些值的公式是:(sprite_width * -number_steps) - (from_brackground_position) = (to_background_position);请注意 number_steps 是负数!另请注意，from 和 to 也可以用作百分比。检查jsfiddle有最新的变化。如果您有任何问题或意见，请随时提出/发表意见。希望这可以帮助!谢谢，我很高兴我能提供帮助，我也忘了放一个指向 css-tricks 的链接，其中对 steps() 函数和 css 的其他 properties 进行了很好的解释使用的动画。喜欢就看看吧here it is .来自墨西哥的问候!