css3实现轮播

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
   <style type="text/css">
   div{
    500px;
    height:100px;
    border:2px solid #000;
    padding:0px;
    position: relative;
    overflow: hidden;
    }
    ul{
      list-style: none;
      padding:0px;
      margin: 0px;
      180%;
      position:absolute;
      left:0px;
      top:0px;
      -webkit-animation:3s move infinite linear ;
    }
    @-webkit-keyframes move{
      0%{
        left:0;
      }
      100%{
        left:-500px;
      }
    }
    div:hover ul{
      -webkit-animation-play-state:paused;
    }
    li{
      100px;
      height:100px;
      float:left;
      padding:0;
      margin: 0;
    }
    li img{
      100px;
      height:100px; 
    }
    </style>
</head>
<body>
<div>
  <ul>
      <li><img src="img/bsp.jpg"></li>
      <li><img src="img/psb.jpg"></li>
      <li><img src="img/bsp.jpg"></li>
      <li><img src="img/psb.jpg"></li>
      <li><img src="img/bsp.jpg"></li>
       <li><img src="img/bsp.jpg"></li>
      <li><img src="img/psb.jpg"></li>
      <li><img src="img/bsp.jpg"></li>
      <li><img src="img/psb.jpg"></li>
      <li><img src="img/bsp.jpg"></li>
       <li><img src="img/bsp.jpg"></li>
      <li><img src="img/psb.jpg"></li>
      <li><img src="img/bsp.jpg"></li>
      <li><img src="img/psb.jpg"></li>
      <li><img src="img/bsp.jpg"></li>
  </ul>
</div>
</body>
</html>
　-webkit-animation:(时间 name 速度)
　-@webkit-keyframes name{
　　0%{
　　}
100%{
　　left:(左移动- ，右边移动 +)
}