CSS轮播图片不是一个接一个出现的而且很快

Question

我的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;}
}
劳烦各位大佬了

Answer 1

.c1{
        width:1520px ;
        height:330px ;
        overflow: hidden;
        margin-top: 20px;
    }
    .c1 ul li img{
        width: 1520px;
        height: 330px;
        border: 1px #ddd solid;
    }
    .c1 ul{
        width: 20000px;
        white-space: nowrap;
    }
    .c1 ul{
        animation: myf 60s linear infinite alternate;
    }
    .c1 ul li{        
        display: inline-block;
    }
    @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;}
        100% {margin-left: -9120px;}
    }