@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画的名称和运行所需时间是必须的
帧动画：将动画名称赋给选择器后动画运行完就会返回初始值，所以需要通过给选择器添加类保证动画的正常运行
下图是一个简洁的无缝滚动（css3）
划过停止运动：animation-play-state:paused
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/public.css" rel="external nofollow" />
<style type="text/css">
.wrap{width: 500px;height:100px;overflow:hidden;margin: 100px auto;position: relative;border: 10px solid #999;}
.list{position: absolute;left:0;top:0;width: 1000px;height: 300px;}
.list:hover{-webkit-animation-play-state: paused;-moz-animation-play-state: paused;-ms-animation-play-state: paused;animation-play-state: paused;}
.list li{float:left;width: 98px;height: 98px;border: 1px solid #000;text-align: center;line-height: 98px;}
@-webkit-keyframes move{
0%{
left: 0;
}
100%{
left: -500px;
}
}
@-moz-keyframes move{
0%{
left: 0;
}
100%{
left: -500px;
}
}
@-ms-keyframes move{
0%{
left: 0;
}
100%{
left: -500px;
}
}
@keyframes move{
0%{
left: 0;
}
100%{
left: -500px;
}
}
.scroll{-webkit-animation: 3s move infinite;-moz-animation: 3s move infinite;-ms-animation: 3s move infinite;animation: 3s move infinite;left: -500px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById("list");
oUl.className='list scroll';
}
</script>
</head>
<body>
<div class="wrap">
<ul class="list" id="list">
<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>
</body>
</html>
