纯css写滚动的弹幕特效

最近在写一个春节活动，里面有一个类似拼多多展示中奖用户的弹幕滚动。

后台给了随机滚动将近一百条数据，之前写过一版，是使用定位，将数据顶上去，但是一秒一动的效果略略有些卡顿。后来决定使用css动画来实现

先来上代码吧

<view class="chat">
      <view class="chatInfo"  v-for="(item,i) in chatArr" :key='i'>
               <view class="chatItem">{{item}}</view><br>
      </view>
</view>

 

 css代码

.chatInfo{
    position: relative;
    top: 0;
    animation: rowScrollTest 200s linear infinite;
}
@keyframes rowScrollTest {
  0% {
    top: 0;
  }
  100% {
      top:-3960rpx;//高度是我自己计算的，因为展示的内容不重要，高度就随意了一些；
   }
}

　　效果如图