<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>

 <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>