CSS可重复滑块动画

Question

我正在尝试仅使用css关键帧动画创建可重复的滑块。在我的项目中，我有一个div.wrapper，里面有我的.inside-wrapper，里面有20个带盒子类的标签。对于css我已经为.wrapper 1000px宽度和高度200px放置了隐藏溢出。对于我的.inside-wrapper，我把宽度为4000px，高度为200px;。盒子宽200像素，高200像素。然后我创建了我的关键帧动画，使用0％的翻译为0px，最高为100％为-4000px;。我想使用前进或替代动画创建可重复的动画。你可以帮我用css和关键帧动画创建一个可重复的动画吗？

感谢。

* {
  padding:0px;
  margin:0px;
  box-sizing:border-box;
}

body {
  background:#68a7aa;
  font-family:sans-serif;
  color:#fff;
}

.wrapper {
  width:1000px;
  height:200px;
  margin:0 auto;
  margin-top:100px;
  border:3px solid #fff;
  overflow:hidden;
}

.inside-wrapper {
  width:4000px;
  height:200px;
}

a {
  text-decoration:none;
  line-height:200px;
}

.box {
  font-size:20px;
  color:orange;
  background:#246e93;
  display:inline-block;
  height:200px;
  width:200px;
  border:1px solid #000;
  float:left;
  animation:slider-animation 10s linear 10 1s forwards;
}


@keyframes slider-animation {

  0% {
    transform:translateX(0px;)
  }

  100% {
    transform:translateX(-4000px);
  }

}

<div class="wrapper">
  <div class="inside-wrapper">
    <a href="" class="box">1</a>
    <a href="" class="box">2</a>
    <a href="" class="box">3</a>
    <a href="" class="box">4</a>
    <a href="" class="box">5</a>
    <a href="" class="box">6</a>
    <a href="" class="box">7</a>
    <a href="" class="box">8</a>
    <a href="" class="box">9</a>
    <a href="" class="box">10</a>
    <a href="" class="box">11</a>
    <a href="" class="box">12</a>
    <a href="" class="box">13</a>
    <a href="" class="box">14</a>
    <a href="" class="box">15</a>
    <a href="" class="box">16</a>
    <a href="" class="box">17</a>
    <a href="" class="box">18</a>
    <a href="" class="box">19</a>
    <a href="" class="box">20</a>
  </div>
</div>