css实现内容轮播

很多大屏数据需要炫酷一点的都会有内容轮播的需求，下面我写了一个简单的demo（这是上下轮播，左右轮播也差不多啦！translateY改成translateX），如果有更好的写法，希望大神些可以分享给我，让我学习学习(*￣︶￣)

    <div class="list_box">
      <div class="list_box_div">
        <div v-for="(v,i) in defaultWords" :key="i">{{v.name}}</div>
      </div>
    </div>

  .list_box {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    overflow: hidden;
    position: relative;
  }

  .list_box_div {
    position: absolute;
    animation: dhxg 8s linear 0s infinite;
  }

  @keyframes dhxg {
    from {
      transform: translateY(100px);
    }

    to {
      transform: translateY(-100%);
    }
  }