背景图片 CSS3 无限循环动画

Question

我正在尝试对一个作为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/

- Karl

---

你可以提供一个 jsfiddle 吗？ - Vangel Tzo

jsfiddle还是包含代码运行的页面？ - Javier Núñez

http://jsfiddle.net/UHgF8/5/ - Karl

Answer 1

通过使用图像的确切高度进行修复：

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

- Karl