使用CSS3动画的无限滚动轮播

Question

我正在尝试完成滚动效果，但我不确定如何在循环回到原始图像时创建平滑过渡。当动画第二次循环时，我看到它花费更多时间循环与第一次迭代相比。任何帮助，将不胜感激。我们也欢迎使用本机JavaScript解决方案。

标记

<div class="caurosel-wrapper">
     <ul class="caurosel-list">
         <li class="first"><h3>1</h3></li>
         <li><h3>2</h3></li>
         <li><h3>3</h3></li>
         <li><h3>4</h3></li>
         <li><h3>5</h3></li>
         <li><h3>6</h3></li>
         <li><h3>7</h3></li>
         <li><h3>8</h3></li>
         <li><h3>9</h3></li>
         <li><h3>10</h3></li>
         <li><h3>11</h3></li>
         <li><h3>12</h3></li>
     </ul>
</div>

风格

.caurosel-wrapper{
    overflow:hidden;
    position:relative;
    width:auto;
    max-width: 1440px;
    margin: 0 auto 30px;
}

.caurosel-list{
    width: 2112px;
    list-style-type: none;
    white-space: nowrap;
    font-size: 0;
    animation: moveSlideshow 15s linear infinite;
}
    li{
        display: inline-block;
        background-color: gray;
        width: 160px;
        height: 160px;
        margin: 0 8px;
    }
    li.first{
        -webkit-animation: moveSlideshow 30s linear infinite;
        -moz-animation: moveSlideshow 30s linear infinite;
        -ms-animation: moveSlideshow 30s linear infinite;
        -o-animation: moveSlideshow 30s linear infinite;
        animation: moveSlideshow 30s linear infinite;
    }
    h3{
        font-size: 30px;
        color: #fff;
    }

    @keyframes moveSlideshow {
        0%{
            margin-left: 0;
        }
      100% { 
        margin-left: -538px;  
      }
    }

这是我的小提琴link。

注意：我也看到当浏览器调整大小时动画受到影响。