实现滚动轮询播放列表

需求要做一个向上滚动轮询播放的列表，不想用js，只用css，记录一下。

                <div className='power-time' style=>
                    <div className='power-time-scroll'>
                        <TimeLine list={professorList}/>
                    </div>
                </div>

css文件

  .power-time {
    padding: 18px 0 0 15px;
    height: 28%;
    overflow: hidden;

    .power-time-scroll {
      position: relative;
      animation: moveUp 20s 1s linear infinite;
    }

    .power-time-scroll:hover {
      animation-play-state: paused;
      -webkit-animation-play-state: paused; /* Safari 和 Chrome */
    }
	}

  @keyframes moveUp {
    0% {
      -webkit-transform: translateY(0px);
      opacity: 1
    }
    100% {
      -webkit-transform: translateY(-240px);
      opacity: 1
    }
  }