body {
    animation: change-color 4s infinite;;
    animation-direction: alternate-reverse;
}

.circle{
width: 50%;
aspect-ratio:1/1;
position:fixed;
 margin-left:50%;
 margin-top:30%;
 transform: translate(-50%,-50%);
 background-color: black;
 border-radius: 40%;
 animation: change-color 8s infinite;;
 animation-direction: alternate-reverse;

}

@keyframes change-color {
   0% {
    background-color: purple;
  }
  50% {
    background-color: blue;
  }

    100% {
    background-color: black;
  }
}