我的css轮播速度很快尽管我设置了60s 我刚学HTML+css不久在做一个网页实战遇到很多问题请本站大佬劳烦看一下，谢谢了
html：

<div class="c1">
      <ul>
          <li><a href=""><img src="image/lunbo1.jpg" alt=""></a></li>
          <li><a href=""><img src="image/lunbo2.jpg" alt=""></a></li>
          <li><a href=""><img src="image/lunbo3.jpg" alt=""></a></li>
          <li><a href=""><img src="image/lunbo4.jpg" alt=""></a></li>
          <li><a href=""><img src="image/lunbo5.jpg" alt=""></a></li>
          <li><a href=""><img src="image/lunbo6.jpg" alt=""></a></li>
          <li><a href=""><img src="image/lunbo7.jpg" alt=""></a></li>
      </ul>          
</div>

css：

.c1{
    width:1520px ;
    height:330px ;
    overflow: hidden;
    margin-top: 20px;
}
.c1 ul li img{
    width: 1520px;
    height: 330px;
}
.c1 ul{
    width: 20000px;
}
.c1 ul li{
    display: inline-block;
    animation: myf 60s ease-in-out infinite alternate;
}
@keyframes myf {
    0% {margin-left: 0px;}
    14% {margin-left: -1520px;}
    28% {margin-left: -3040px;}
    42% {margin-left: -4560px;}
    56% {margin-left: -6080px;}
    70% {margin-left: -7600px;}
    84% {margin-left: -9120px;}
}
劳烦各位大佬了