动画元素位置循环

Question

So I'm having trouble with getting this loop to work the way I want it to. I have it working, as you'll see in the jsfiddle ( https://jsfiddle.net/alexflores67/rssffLdp/2/#&togetherjs=BHy1eDiVVH ). However, I'm trying to take a simple cloud picture and make it go from left to right in a continuous loop. However, I want the cloud to start offscreen from the left and end past the screenview on the right so it looks natural. I have this effect, but it's also increasing the scroll bar.

Also, I tried recreating the issue on jsfiddle, but I couldn't, on my site, which is locally hosted so I can't share at the moment, the navigation links won't allow me to click on them until the cloud has reached a certain point in the screen. Does anyone know why this might be?

Any help would be much appreciated.

CSS

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

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

}

JS $(document).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 only , here you go!

 .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="http://i.stack.imgur.com/OUVqO.jpg" alt="cloud"> </div>