Javascript 跨屏幕的CSS线性动画

我有一辆车，我正移到屏幕的右边。（汽车需要从左侧无限远处启动，并从右侧屏幕中退出）

但动画仅重复一次并停止

<div class="car-right">
   <img class="car-right-image"src="/assets/car-right.png" alt="">
</div>

.car-right {
  position: absolute;
  top: 86%;
  left: -200px;
  z-index: 10;
}
.transit-right {
  -webkit-transform: translate(1920px,0);
  -webkit-transition: all 30s ease-in-out;
  transition: all 30s ease-in-out;
  z-index: 10;
}

$(function() {
  return $('.car-right-image').addClass("transit-right");
});

.汽车对吗{
位置：绝对位置；
最高：86%；
左：-200px；
z指数：10；
}
.过境权{
-webkit转换：翻译（1920px，0）；
-webkit过渡：所有30秒都易于输入输出；
过渡：所有30秒都容易进入和退出；
z指数：10；
}
$（函数（）{
return$（'.car right image'）.addClass（“transit right”）；
});

我做错什么了。。。我如何使汽车从左边无限远地驶向右边消失

我知道我必须对关键帧和无限属性做些什么

但我似乎无法得到它

非常感谢您的帮助，谢谢

问候

---

-Skykog

您需要使用CSS动画，而不是过渡

.car-right {
  position: absolute;
  top: 86%;
  left: -200px;
  z-index: 10;
  background-color: red;
  animation-duration: 4s;
  animation-name: goRight;
  animation-iteration-count: infinite;
}

@keyframes goRight {
  from {
    transform: translate(0,0);
  }

  to {
    transform: translate(1920px,0);
  }
}

这不需要jQuery。

---

这是一个每隔4秒运行的演示：

jQuery解决方案，这是一个

---

“我知道我必须对关键帧和无限属性做点什么。”所以你知道答案，但不把工作放进去？询问代码的问题必须证明对正在解决的问题的最低理解。包括尝试过的解决方案、它们不起作用的原因以及预期结果。另请参见：堆栈溢出问题检查表。CSS3转换与动画不同。您当前正在使用过渡，但听起来您需要动画（允许关键帧）。。不需要javascriptHey，谢谢你的帮助。。。。但这不起作用。。。。我也添加了同样的功能，即使尝试了供应商prefixIt也可以在Chrome中使用。你试过小提琴吗？嗨…谢谢：）…这是最终奏效的方法，但我得到了你的指导。。。再次感谢大家：）。。。。

.car-right-image {
  position: absolute;
  width: 260px;
  left: -260px;
}


$(function() {
  setInterval(function() {
    $('.car-right-image').animate({ left: $(window).width() + 'px' }, 3000, 'linear', function() {
      $(this).css({ left: - $(this).width() + 'px' });
    });
  }, 10);
});