H5+CSS3做图片轮播滚动效果

HTML代码部分：

 <div id="wrap">
     <ul id="list">
         <li>10</li>
         <li>9</li>
         <li>8</li>
         <li>7</li>
         <li>6</li>

         <li>5</li>
         <li>4</li>
         <li>3</li>
         <li>2</li>
         <li>1</li>
     </ul>
 </div>

CSS3代码部分：

 <style type="text/css">
    @-webkit-keyframes move{
          0%{left:-500px;}
          100%{left:0;}
    }
    #wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;
    overflow: hidden;}

    #list{position:absolute;left:0;top:0;padding:0;margin:0;
        -webkit-animation:5s move infinite linear;width:200%;}

        #list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;
             color:#fff;text-align: center;float:left;font:normal 50px/2.5em '微软雅黑';}

        #wrap:hover #list{-webkit-animation-play-state:paused;}
     </style>

最终效果图如下：