@keyframes mymove {
0% { background: black;; 0px; top; 0px}
  25% {background: green; left; 0px; top; 0px;}
  50% {background: yellow; right; 0px; bottom: 0px;}
75% {background: pink; left; 0px; bottom; 0px;}
}
#box {
 background-color: black; 
  height: 100px;
  width: 100px;
  border-radius: 200px;
  justify-content: center;
  animation: mymove 5s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  margin: auto;
}
@keyframes mymove {
0% { background: black;; 0px; top; 0px}
  25% {background: green; left; 0px; top; 0px;}
  50% {background: yellow; right; 0px; bottom: 0px;}
75% {background: pink; left; 0px; bottom; 0px;}
}
.move {
 background-color: black; 
  height: 100px;
  width: 100px;
  border-radius: 200px;
  justify-content: center;
  animation: mymove 5s infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  margin: auto;
}