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;
}

.two{
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.three{
  animation-timing-function: steps(10);
  animation-fill-mode: forwards;
}

.three:hover{
    animation-play-state: paused;
}