<div class="container">
  <div class="box-1">
  </div>

  <div class="box-2">
  </div>
</div>

div {
  width: 100px;
  height: 100px;
  position: absolute;
}

.container {
  width: 100%;
  height: 400px;
}

.box-1 {
  background: red;
  animation-name: move;
  animation-duration: 4s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.box-2 {
  background: green;
  top: 150px;
  animation-name: move;
  animation-duration: 4s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes move {
    from {
      left: 0;
    }
    to {
      left: 400px;
    }
}