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/

Answer 1

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

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

背景图片CSS3无限循环动画

1 个答案: