如何从右到左无限水平地为徽标图像设置动画？

Question

我有超过 10 张徽标图片。在页面加载时，我只需要显示 6 个徽标，其余徽标将从右侧无限水平滑动到左侧。

你能帮我解决关键帧和 CSS 吗？

我找到了这个例子 https://codepen.io/mdashikar/pen/VWPvgE 但对我来说不是 100%。如果您注意到图像是从右到左的幻灯片，请等待几秒钟，然后再次滑动。我需要图像应该不停地滑动。

.logo_slider {}
.logo_slider ul { 
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo_slider ul li {
  display: inline-block;
  border: 1px solid #ccc;
  margin: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.logo_slider ul li a img {
  width: 100%;
  -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
}	

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  from { right: 0px;  }
  to   { left: 200px; }
}

/* Standard syntax */
@keyframes mymove {
  from { right:0px;   }
  to   { left: 200px; }
}

<div class="logo_slider">
  <ul>
    <li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
    <li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
    <li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
    <li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
    <li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
    <li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
    <li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
    <li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
    <li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
  </ul>
</div>

Answer 1

这是你要找的吗？

.logo_slider {
  overflow: hidden;
}

.logo_slider ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo_slider ul li {
  display: inline-block;
  border: 1px solid #ccc;
  margin: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.logo_slider ul li a img {
  position: relative;
  width: 100%;
  position: relative;
}

.logo_slider ul li:nth-child(1n+7) a img {
  -webkit-animation: mymove 5s infinite;
  /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes mymove {
  from {
    left: 100vw;
  }
  to {
    left: 0;
  }
}


/* Standard syntax */

@keyframes mymove {
  from {
    left: 100vw;
  }
  to {
    left: 0;
  }
}

另外看看我的codepen：https://codepen.io/zothynine/pen/VQyzQZ

Answer 2

试试这个应该可以的

// Fetch variables
var scrollTop = $(document).scrollTop();
var windowHeight = $(window).height();
var bodyHeight = $(document).height() - windowHeight;
var scrollPercentage = (scrollTop / bodyHeight);

// if the scroll is more than 90% from the top, load more content.
if(scrollPercentage > 0.9) {
    // Load content
}