用css3实现循环滚动效果：
css：
#wrap{
width: 200px
height: 150px
border: 1px solid #000
position: relative
margin: 100px auto
overflow: hidden
}
#list{
position: absolute
left: 0
top: 0
margin: 0
padding: 0
animation: move 12s infinite linear
-webkit-animation: move 12s infinite linear
width: 500%
}
#list li {
list-style: none
width: 200px
height: 150px
border: 0
float: left
}
@-webkit-keyframes move{
0% {
left: 0
}
100% {
left: -800px
}
}
@keyframes move {
0% {
left: 0
}
100% {
left: -800px
}
}
#wrap:hover #list {
-webkit-animation-play-state: paused /*动画暂停播放*/
}
html：
<div id="wrap">
<ul id="list">
<li><a href="#"><img src="img/1.jpg" border="0" /></a></li>
<li><a href="#"><img src="img/2.jpg" border="0" /></a></li>
<li><a href="#"><img src="img/3.jpg" border="0" /></a></li>
<li><a href="#"><img src="img/4.jpg" border="0" /></a></li>
<li><a href="#"><img src="img/5.jpg" border="0" /></a></li>
</ul>
</div>
扩展资料：
animation（动画） 属性：
语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state
参数：
1、animation-name：指定要绑定到选择器的关键帧的名称。
2、animation-duration：动画指定需要多少秒或毫秒完成。
3、animation-timing-function：设置动画将如何完成一个周期。
值：
linear：动画从头到尾的速度是相同的。
ease：默认。动画以低速开始，然后加快，在结束前变慢。
ease-in：动画以低速开始。
ease-out：动画以低速结束。
ease-in-out：动画以低速开始和结束。
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
4、animation-delay：设置动画在启动前的延迟间隔。
5、animation-iteration-count ：定义动画的播放次数。
值：
n：一个数字，定义应该播放多少次动画。
infinite：指定动画应该播放无限次（永远） 。
