@keyframes move {
  0%{
    transform: translateY(90px);
    background: orange;
  }
  15%{
    transform: translate(90px,90px);
    background: yellow;
  }
  30%{
    transform: translate(180px,90px);
    background:red;
  }
  45%{
    transform: translate(90px,90px);
    background:blue;
  }
  60%{
    transform: translate(90px,0);
    background:green;
  }
  75%{
    transform: translate(90px,90px);
    background:purple;
  }
  90%{
    transform: translate(90px,180px);
    background:red;
  }
  100%{
    transform: translate(90px,90px);
    background: orange;
  }
}

div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius:10px;
  background: orange;
  transform: translateY(90px);
  animation-name: move;
  animation-duration: .5s;
  animation-timing-function: ease-in;
  animation-delay: .2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}