<div class="circle"></div>

body {
 height: 100vh;
 overflow: hidden;
 background: linear-gradient(60deg, #41295a, #2F0743);
}

.circle {
  position: relative;
  width: 100%;
  height: 100vh;
  
  &:before, &:after {
  content: '';
  position: absolute;
  width: 80vmin;
  height: 80vmin;
  border-radius: 50%;
  background: 
    repeating-radial-gradient(circle at 50% 50%, 
      white 1px,
      transparent 3px,
      transparent 5px,
      white 7px);    
  }
  &:before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    animation: animate 10s cubic-bezier(.5, 1 , .5, 0) alternate infinite;;
  }
  &:after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

// 動畫
@keyframes animate {
  0%{
    left: -100%;
  }
  100%{
    left: 100%;
  }
}