2

我正在使用此代码，但使用不同的单位：

-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 动画用于游戏的精灵表动画。

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

4

1 回答 1

1

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

编辑：

在更仔细地查看动画属性特别是 steps 函数后，我意识到它将图像的宽度（50px）移动了步数（10），给了我们想要移动的 -500px。因此，例如，如果您想让精灵向右 300 像素，则必须像这样更改动画代码：

@-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 是负数！另请注意，fromandto也可以用作百分比。检查具有最新更改的jsfiddle 。如果您还有任何问题或意见，请随时提问/评论。希望这可以帮助！谢谢，我很高兴我也能提供帮助，我忘了把一个指向 css-tricks 的链接，其中steps()功能解释得很好，其他properties的也css animations使用了。如果您喜欢这里，请查看它。来自墨西哥的问候！

于 2013-07-15T18:40:52.280 回答