css - 背景图片 CSS3 无限循环动画

Question

我正在尝试制作一些 Steam 动画，它是 div 上的背景图像，以无限循环动画。除了每 5 秒跳一次(动画完成后)之外，我几乎做到了。

这是我到目前为止所做的:

div#steam { background-image: url('../images/steam.png'); background-repeat: repeat-y; background-position: left bottom; -webkit-animation: slide 5s linear infinite; }
@-webkit-keyframes slide {
    from { background-position: left 0; }
    to { background-position: left 100%; }
}

所以这会垂直重复背景，这正是我想要的，然后它的动画效果很好，速度也不错，看起来很逼真。唯一的问题是每个循环完成 5 秒动画后的跳转。我该如何解决这个问题？

JSFIDDLE: http://jsfiddle.net/UHgF8/5/

Answer 1

通过使用图像的确切高度来修复:

@-webkit-keyframes slide {
    from { background-position: left 0; }
    to { background-position: left -1790px; }
}