Simone用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 rel="nofollow" href="#"><img /></a></li>
<滑渗li><a rel="nofollow" href="#"><img /></a></li>
<li><a rel="nofollow" href="#"><img 信氏脊 /></a></li>
<li><a rel="nofollow" href="#"><img /></a></li>
<li><a rel="nofollow" href="#"><img /></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：指定动画应该播放无限次（永远） 。
