javascript - 如何使用css3做连续翻译效果

Question

CSS:

.horizon {
    position:absolute;
    top:380px;
    width: 1800px;
    height: 50px;
    background: url(images/road.png) repeat-x;
    -webkit-animation-name: prop-600;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes prop-600 {
    0% {
        -webkit-transform: translateX(0px);
    }
    100% {
        -webkit-transform: translateX(-1000px);
    }
}

这工作正常，但在 100% 后它停止并再次开始翻译。我不想在 100% 时停止翻译。我希望图像从左到右不停地移动。

这是 fiddle :http://jsfiddle.net/rVAtz/

在 fiddle 而不是图像中，我只是给出了方形元素

我可以使用 javascript 或 jquery 来实现这种效果。

谁能帮帮我。提前致谢

Answer 1

这里没有transform。删除所有转换/转换属性并使用它:

var startTime = +(new Date()),
    horizon = document.getElementsByClassName('horizon')[0];
(function update(){
    var dif = (new Date()).getTime() - startTime;
    dif *= 0.05;
    horizon.style.left = (100 - dif)+'px';
    requestAnimFrame( update, horizon );
})();

我用的是requestAnimationFrame，你可以用setTimeout。 fiddle :http://jsfiddle.net/rVAtz/10/