背景图片CSS3无限循环动画

时间:2014-02-28 10:01:12

标签: css css3 animation css-animations

我正在尝试动画一些蒸汽,它是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/

1 个答案:

答案 0 :(得分:6)

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

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