* {
  margin: 0px;
  padding: 0px;
}
body {
  direction: rtl;
}
#circle {
  width: 150px;
  height: 150px;
  background-color: blueviolet;
  border-radius: 50%;
  position: absolute;
  top: 100px;
  right: 20px;
  animation: move;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
@keyframes move {
  0% {
    top: 100;
    right: 20px;
  }
  25% {
    top: 100px;
    right: 300px;
  }
  50% {
    top: 400px;
    right: 300px;
  }
  75% {
    top: 400px;
    right: 20px;
  }
  100% {
    top: 100;
    right: 20px;
  }
}
