Javascript 如何使用css3实现连续翻译效果

CSS:

这是正确的工作，但100%后，它将停止，并再次开始翻译。我不想100%停止翻译。我希望图像不停地从左向右移动

这是小提琴：

在小提琴中，我只给出了正方形元素，而不是图像

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

---

有人能帮我吗。提前谢谢

这个有特殊属性，但我忘了。因此，您也可以创建动画，如：

.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);
    }
}

UPD:给你<代码>-webkit动画方向：交替

小提琴：第一种方式

另一个UPD:好吧。将此css设置为方形：

0% {
  -webkit-transform: translateX(0px);
}
50% {
  -webkit-transform: translateX(-1000px);
}
100% {
  -webkit-transform: translateX(0px);
}

并使用以下jQ代码：

-webkit-transition: -webkit-transform 1s linear; /* Or 20s as in your code */
-webkit-transform: translateX(100px);

小提琴：

这里没有任何库（纯JS）：

---

小提琴：不确定这是否是你想要的

---

这里没有

transform

s。删除所有变换/变换属性并使用以下选项：

@-webkit-keyframes prop-600 {
    0% {
        -webkit-transform: translateX(0px);
    }
    50% {
        -webkit-transform: translateX(-100px);
    }
}

我使用

requestAnimationFrame

，您可以使用

setTimeout

。

---

fiddle:

所以你基本上希望它滑出视图而不重新出现？我给了图像重复-X，希望将图像向一个方向滑动而不停止，我希望向同一方向滑动。@PriyaSunanthan，嗯。。。那么，您为什么要明确地使用css动画呢？为什么不把

duration

和

translate

设置为任何大的值呢？我也可以使用javascript。如何使用set实现这一点duration@PriyaSunanthan，所以我会在几分钟内更新我的答案。如果没有webkit Transforms，用纯javascript就可以实现这一点吗？这一次有效吗？我想要无限次，我如何实现@moredems

var position = 100,
    horizon = document.getElementsByClassName('horizon')[0],
    binded = false;
(function animateSquare(){
  position -= 100;
  horizon.style.webkitTransform = 'translateX('+position+'px)';
  if (!binded) {
    horizon.addEventListener('webkitTransitionEnd',animateSquare,false);
    binded = true;
  }
})();

@-webkit-keyframes prop-600 {
    0% {
        -webkit-transform: translateX(0px);
    }
    50% {
        -webkit-transform: translateX(-100px);
    }
}

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 );
})();