vue弹幕，运动结束和开始的时候会突然消失，然后突然出现，请问改如何平滑的过度，首尾相接

Question

<template>
  <div class='ace-barrage'>
    <ul class="box">
      <li v-for="el in ku" :key="el.id" class="fly"     :style="{top:el.top + 'px',marginLeft:el.left + 'px'}">{{el.msg}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      ku: [
        {
          msg: '111111111111111111',
          top: '0',
          left: '0'
        },
        {
          msg: '22222222222',
          top: '0',
          left: '100'
        },
        {
          msg: '33333333',
          top: '0',
          left: '200'
        },
        {
          msg: '444444444444',
          top: '0',
          left: '300'
        },
        {
          msg: '555555555',
          top: '0',
          left: '400'
        },
    {
      msg: '111111111111111111',
      top: '30',
      left: '0'
    },
    {
      msg: '22222222222',
      top: '30',
      left: '100'
    },
    {
      msg: '33333333',
      top: '30',
      left: '200'
    },
    {
      msg: '444444444444',
      top: '30',
      left: '300'
    },
    {
      msg: '555555555',
      top: '30',
      left: '400'
    }]
    }
  },
  created() {},
  methods: {}
}
</script>
<style lang='less' scoped>
.box {
  position: relative;
  width: 715px;
  height: 383px;
  margin: 0 auto;
  overflow: hidden;
}
.fly {
  position: absolute;
  width: fit-content;
  height: 46px;
  opacity: 0.7037993;
  background: #090909;
  animation: go 5s infinite linear;
  color: #ffffff;
  border-radius: 31px;
  padding: 5px 10px;
  line-height: 46px;
}
@keyframes go {
  0% {
    left: 100%;
  }
  25% {
    left: 50%;
  }
  50% {
    left: 0%;
  }
  75% {
    left: -50%;
  }
  100% {
    left: -100%;
  }
}
</style>

Answer 1

并不理解你所说的

平滑的过度，首尾相接

能更明确地形容一下嘛？

按照你的代码复现的 DEMO