<div class="mechanism">
<div class="re_roll">
　　<ul>

　　　　<li>1</li>

　　　　<li>2</li>

　　　　<li>3</li>

　　　　<li>4</li>

　　　　<li>5</li>

　　　　<li>1</li>

　　　　<li>2</li>

　　　　<li>3</li>

　　　　<li>4</li>

　　　　<li>5</li>

　　</ul>
</div>
</div>

css

.mechanism{
height: 200px;
overflow: hidden;
}
.re_roll{
-webkit-animation: 30s rowup linear infinite normal;
animation: 30s rowup linear infinite normal;
position: relative;
}
.mechanism:hover .re_roll{
animation-play-state: paused;

//鼠标经过停止滚动
}

@keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, (此处列表高度列如：-200px), 0);
transform: translate3d(0, (此处列表高度列如：-200px), 0);

}
}

(适用于列表的内容固定）