css实现无限滚动注意点

注意点

是item重复2遍，

案例中 1-15表示全部item, 1~ --15~表示重复摆放的item，

动画开始的时候 transform: translate3d(50%, 0, 0) 使得屏幕最右侧一项 刚好是 全部item的一半， 也就是 15 是屏幕右侧最后一项，

动画结束时候 transform: translateZ(0); ，恢复成开始状态， 此时 15~ 是屏幕最右侧最后一项，正好和开始的item重合， 以此重复，

参考 easyv.cloud/?t=bdtg&bd_…

 .scroll-container-wrapper {
  width: 100%;  // 宽度为屏幕宽度
  display: flex;
  height: 80px;

  justify-content: flex-end; // 右对齐， 方便动画时候不用加负号
  overflow: hidden;
}

.scroll-container {
  white-space: nowrap;  // 每一个item在一行
  animation: HomePartners_singleRowup 60s linear infinite normal;
}

.scroll-item {
  text-align: center;
  height: 60px;
  line-height: 60px;
  width: 150px;
  border: 1px solid #ccc;
  margin-right: 16px;
  display: inline-block;
}

@keyframes HomePartners_singleRowup {
  to {
  
    transform: translateZ(0); //重要！！ 此时动画结束，恢复成初始化状态，那么第二遍的末尾在最右侧
  }

  0% {
   
    transform: translate3d(50%, 0, 0);  //重要！！ 关键！！！ 初始化的时候，向左移动自身一半，刚好  是第一遍的末尾在最右侧
  }
}