利用css实现上下轮播，但是会出现卡顿，可以优化

css

.container {
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow: hidden;
  
}

// 动画
.rowup {
    -webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;
    &:hover{
        animation-play-state:paused;
        -webkit-animation-play-state:paused; /* Safari 和 Chrome */
    }
}



@-webkit-keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

html

<div class="container ">
    <div class=" rowup " >
    <!-- 循环代码,也就是动画体 -->
         <div  style="height: calc( 100% - 20px);">
            <p><span>asd1</span>1、dqx5***</p>
            <p><span>asd2</span>2、s376***</p>
            <p><span>asd3</span>3、sdk1***</p>
            <p><span>asd4</span>4、dfdfd</p>
            <p><span>asd5</span>5、goods</p>
            <p><span>asd6</span>6、gao6***</p>
            <p><span>asd7</span>7、ando***</p>
            <p><span>asd8</span>8、6813***</p>
            <p><span>asd9</span>9、lais***</p>
        </div>
    </div>
 
</div>