javascript - 动画元素位置循环

Question

所以我无法让这个循环按照我想要的方式工作。我已经让它工作了，正如您将在 jsfiddle ( https://jsfiddle.net/alexflores67/rssffLdp/2/#&togetherjs=BHy1eDiVVH ) 中看到的那样。但是，我正在尝试拍摄一张简单的云图片，并使其从左到右连续循环。但是，我希望云从左侧开始在屏幕外，并在右侧的屏幕 View 之外结束，这样看起来很自然。我有这个效果，但它也增加了滚动条。

此外，我尝试在 jsfiddle 上重现该问题，但在我的网站上无法重现该问题，该网站是本地托管的，因此目前无法共享，导航链接不允许我单击它们，直到云已到达屏幕中的某个点。有谁知道为什么会这样？

任何帮助将不胜感激。

CSS

.container {
  width: 200px;
  height: auto;
  overflow: hidden;
 }
#clouds {
  position:absolute;
  width: 200px;
}

#cloud-img {
width: 100%;
height: auto;
margin-left: -30%;

}

JS $(文档).ready(function() {

function repeat() {
  $("#clouds").css({"left":0}).show();
  $("#clouds").animate({left:'+=110%'},2000);
  $('#clouds').delay(500).fadeOut(500,repeat);
}

repeat(); 
});

$("#test").click(function() {
    alert('hello');
});

Answer 1

仅限 CSS，开始吧!

.container {
  position: relative; /* don't forget to set position  */
  overflow: hidden;
  height: 180px;
 }

#cloud-img{
  position: absolute;
  width: 200px;
  top:0; left:0;
          transform: translateX(-200px);
  -webkit-transform: translateX(-200px);
          animation: cloud 2s linear infinite;
  -webkit-animation: cloud 2s linear infinite;
}

@keyframes         cloud { to{         transform: translateX(100vw); } }
@-webkit-keyframes cloud { to{ -webkit-transform: translateX(100vw); } }

<div class="container">
  <img id="cloud-img" src="/image/OUVqO.jpg" alt="cloud">
</div>