<div class="dot"></div>

.dot {
  margin:20px auto;
  color:darkblue;
  width:70px;
  height:40px;
  --d:radial-gradient(farthest-side,currentColor 90%,#0000);
  background:var(--d),var(--d),var(--d);
  background-size:20px 20px;
  background-repeat:no-repeat;
  animation: m 1s infinite alternate;
}

@keyframes m {
  0%  {background-position:calc(0*100%/2) 50% , calc(1*100%/2) 50% , calc(2*100%/2) 50% }
  20% {background-position:calc(0*100%/2) 0   , calc(1*100%/2) 50% , calc(2*100%/2) 50% }
  40% {background-position:calc(0*100%/2) 100%, calc(1*100%/2) 0   , calc(2*100%/2) 50% }
  60% {background-position:calc(0*100%/2) 50% , calc(1*100%/2) 100%, calc(2*100%/2) 0   }
  80% {background-position:calc(0*100%/2) 50% , calc(1*100%/2) 50% , calc(2*100%/2) 100%}
  100%{background-position:calc(0*100%/2) 50% , calc(1*100%/2) 50% , calc(2*100%/2) 50% }
}