css实现上下轮播

利用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

    

    
         

            
asd11、dqx5***
            
asd22、s376***
            
asd33、sdk1***
            
asd44、dfdfd
            
asd55、goods
            
asd66、gao6***
            
asd77、ando***
            
asd88、6813***
            
asd99、lais***