Цикл положения элемента анимации

Question

Так что у меня возникают проблемы с тем, чтобы этот цикл работал так, как я этого хочу. У меня это работает, как вы увидите в jsfiddle (https://jsfiddle.net/alexflores67/rssffLdp/2/#&togetherjs=BHy1eDiVVH). Тем не менее, я пытаюсь сделать простой облачный рисунок и сделать его слева направо в непрерывном цикле. Тем не менее, я хочу, чтобы облако начиналось с экрана слева и заканчивалось экраном справа, так что оно выглядит естественным. У меня этот эффект, но он также увеличивает полосу прокрутки.

Кроме того, я попытался воссоздать проблему на 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 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="http://i.stack.imgur.com/OUVqO.jpg" alt="cloud"> 
 
</div>