SOURCE

<div class="outer">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

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

body{
  background-color: white;
}
.outer{
  width: 800px;
  height: 200px;
}

.outer div{
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-top: 10px;
}
@keyframes moveleft {
  0%{
    transform: translateX(0);
  }

  100%{
    transform: translateX(600px);
  }
}

/* 体会一下不同速度和fill-modes的区别 */

.one, .two, .three{
  animation-name: moveleft;
  animation-duration: 2s;
}

.one{
    animation-timing-function: linear;
    animation-iteration-count: 3;
    /* animation-direction: alternate; */
}

/* direction要配合次数一起使用。
alternate代表动画完结后第2次是否从头再来还是反向再来 */
.two{
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: 3;
}

.three{
  animation-timing-function: linear;
  animation-direction: reverse;
  animation-iteration-count: 3;
}