Question

所以我无法让这个循环以我想要的方式工作。我有它工作，你会在jsfiddle（high-resolution timer APIs）中看到。但是，我试图拍摄一张简单的云图，然后在连续循环中从左到右。但是，我希望云从左侧开始屏幕，并从右侧的屏幕视图结束，因此看起来很自然。我有这个效果，但它也增加了滚动条。

另外，我尝试在jsfiddle上重新创建问题，但我不能，在我的网站上，这是本地托管所以我目前无法分享，导航链接将不允许我点击它们直到云已经到了屏幕的某一点。有谁知道为什么会这样？

非常感谢任何帮助。

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 ，在这里你去！

＆＃13;

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

＆＃13;

<div class="container">
  <img id="cloud-img" src="http://i.stack.imgur.com/OUVqO.jpg" alt="cloud">
</div>

＆＃13;

动画元素位置循环

1 个答案: