javascript - 跨屏幕的 CSS 线性动画

Question

我有一辆车正在向屏幕右侧移动。 (小车需要从左无穷远开始，从右边的屏幕里出来)。

但是动画只重复一次就停止了。

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

我在这里做错了什么？ ...我如何让汽车不断从左边无穷远驶来并向右消失？ ...

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

但似乎无法得到它......

非常感谢任何帮助，谢谢。

问候 -Skykog

Answer 1

jQuery 解决方案，这里有一个 FIDDLE

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