css3实现无缝滚动效果

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>无标题文档</title>
 <style>
 @keyframes move
 {
     0%
     {
         transform:translateX(0px);
     }
     100%
     {
         transform:translateX(-500px);
     }
 }
 ul{margin:0;padding:0; list-style:none;}
 .picTab{width:500px;height:100px;border:2px solid #000; margin:50px auto; 

 overflow:hidden;}
 .picTab ul{width:1000px;height:100px; animation:move 5s linear infinite;}
 .picTab li

 {margin:1px;float:left;width:98px;height:98px;background:#000;color:#fff; 

 font:50px/98px "宋体"; text-align:center;}
 .picTab:hover ul{ animation-play-state:paused;}
 </style>
 </head>
 <body>
 <section class="picTab">
     <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>
 </section>
 </body>
 </html>

效果图：