要素の位置ループをアニメ化する

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>