* {
  box-sizing: border-box;
}

.box {
  position:relative;
  width: 300px;
  height: 300px;
  background: #0066ff;
  animation-name:move-box;
  animation-duration: 2000ms;
  animation-timing-function: ease-in;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes move-box{
  from {
    top: 0;
    background:#0066ff;
  }
  to {
    top: 300px;
    background:#ff4949;
  }
}