css3实现向一个方向无缝连接滚动

css3实现向一个方向无缝连接滚动

（我用的vue.js）不过css部分没什么区别
不喜欢麻烦，所以可能写了一个比较简单又好像比较蠢的方法（^ . ^）

html部分

<div class="imgList">
  <div>
    <img v-for="im in imgLists" :src="im.url"/>//循环图片
    <img v-for="im in imgLists" :src="im.url"/>//再次循环图片
  </div>
</div>

css部分

.imgList{
  position: relative;
  overflow: hidden;
  height: 60px;
}
.imgList > div{
  display: flex;
  position: absolute;
  align-items: center;
  animation: mymove 10s linear 1s infinite;
}
@keyframes mymove {
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-50%);//一次循环结束的时候停在第二次图片的位置，直接开始下一次循环，看起来就是无缝循环
  }
}

效果图：