SOURCE

<div id="wrap">
	<ul 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>

#wrap{
  width:500px;
  height:100px;
  border:2px dashed #666;
  position:relative;
  overflow:hidden;
}
#wrap ul{
  position:absolute;
  top:0;
  left:0;
  margin:0;
  padding:0;
  width:200%;
  animation:10s move infinite linear ;
  -webit-animation:10s move infinite linear ;
  transition: all .3s;
}
#wrap ul li{
  width:98px;
  height:98px;
  line-height:98px;
 border:1px solid #f0f0f0;
  background:#333;
  float:left;
  list-style:none;
  font-size:40px;
  color:#fff;
  text-align:center;
}
@-webkit-keyframes move{
  0%{
    left:0;
  }
  100%{
    left:-500px;
  }
}
#wrap:hover ul{
  animation-play-state:paused;
  cursor:pointer;
}