@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"/> <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>