纯css上下滚动显示的动画，现用于微信小程序，如需vue使用；注意html变换

 <view class="check-info-list {{ isClass?'marquee' : '' }}">
      <view class="marquee-content">
        <block wx:for="{{recordList}}">
          <view class="scroll-view-item_H check-info-item">
            <image class="avatar" mode="{{widthFix}}" src="{{item.avatar}}" />
            <text class="user-name">11111</text>
            <text class="get-time">{{item.time}}</text>
            <text class="content">{{item.content}}</text>
          </view>
        </block>
      </view>
    </view>
```js
data:{
  isClass: false     // 拿到数据后 再改为true  可以解决部分手机测试不出数据和动画不动问题
}

```css
/* 动画那一部分 */
.check-info-list{
  width: 100%;
  height: 350rpx;
}

.check-info-item .avatar{
  width: 60rpx;
  height: 60rpx;
  margin: 10rpx;
  margin-right: 20rpx;
  border-radius: 30rpx;
  vertical-align: middle;
}

.check-info-item{
  margin: 6rpx 0;
}

.check-info-item .user-name{
  font-size: 30rpx;
  margin: 10rpx 10rpx;
  display: inline-block;
  line-height: 60rpx;
  vertical-align: middle;
  width: 180rpx;
}

.check-info-item .get-time{
  font-size: 30rpx;
  margin: 10rpx;
  display: inline-block;
  line-height: 60rpx;
  width: 130rpx;

}

.check-info-item .content{
  display: inline-block;
  font-size: 30rpx;
  margin: 10rpx;
  line-height: 60rpx;
  color: blue;
}

@keyframes kf-marque-animation{ 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
.marquee{
    border: none;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    position: relative;
}
.marquee .marquee-content{
    display: inline-block;
    position: relative;
    animation: kf-marque-animation 90s linear infinite;
    white-space: nowrap;
    width: 100%;
} 
/* end */
![上下滚动](https://img-blog.csdnimg.cn/20190512220928923.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZ2VseV9jYw==,size_16,color_FFFFFF,t_70)