@keyframes blink {
  0% { background: #ddd; }
  100% { background: #222; }
}

body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(90deg, #222 50%, #ddd 0) 0 100% / 100% 100% no-repeat;
  transition: background-size 1s;
  
  &:hover {
    background-size: 100% 20%;
  }
  
  &::before, &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    translate: 10vmin -50%;
    width: 20vmin;
    aspect-ratio: 1;
    background: #ddd;
    animation: blink 0.5s linear alternate infinite;
  }
  
  &::after {
    translate: calc(-100% - 10vmin) -50%;
  }
}