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

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

Answer 1

你的代码与原版之间的区别在于，在原版中精灵已经一直向左，所以当精灵滚动时你永远不会看到下一个绘图的白色部分，因此看起来不像它滚动，如果你设置from {background-position:100px;}，你会看到滚动，你会更好地看我，我相信，我也只尝试在原始代码中使用不同的值，但如果你放4步而不是10步，尽管你不会看到完整的动画，你会看到一个足够接近的动画，你也可以使用9我稍后再看看它，看看能不能给你一个更好的答案。它可以帮助你在这里分叉jsfiddle所以你可以看看它。

修改

在仔细观察动画属性之后，特别是步骤功能我意识到它将图像的宽度（50px）移动了步数（10），给出了我们想要移动的-500px。因此，例如，如果你想让精灵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()函数的解释非常好，properties使用了css animations。如果您喜欢here it is，请查看。来自墨西哥的问候！

CSS Sprite Animation无法正常工作

1 个答案: