$rad : 250px;
$duration : 8s;

.sphare{
  position:absolute;
  
  top:-$rad;
  left:-$rad;
  
  width: $rad*2;
  height: $rad*2;
  
  border-radius:100%;
 
  
  transform: rotateZ(45deg) scaleX(0);
  background:red;
  z-index:1;
  
  animation:sphare-grow $duration linear infinite;
}

.sphare-shell{
  position:relative;
  
  width:0;
  height:0;
  
  border: $rad solid transparent;
  border-color:blue transparent transparent blue;
  border-radius:100%;
  
  transform:rotate(135deg);
  
  animation:bg-switch $duration steps(1) infinite;
  
  &:after{
    position:absolute;
    content:'';
    top:-$rad;
    left:-$rad;
    
    width:0;
    height:0;
    
    border:inherit;
    border-radius:inherit;
    
    transform:rotate(-135deg) scaleX(1) rotate(-45deg);
    
    animation:sphare-shell $duration linear infinite;
  }
 
}

@keyframes bg-switch{
  50%{
    transform:rotate(-45deg);
  }
}

@keyframes sphare-shell{
  25%,
  49.9%,
  75%,
  80%{
     transform: rotate(-135deg) scaleX(0) rotate(-45deg);
  }
  50%,
  100%{
     transform: rotate(-135deg) scaleX(1) rotate(-45deg);
  } 
}

@keyframes sphare-grow{
  25%,
  75%{
     transform: rotate(45deg) scaleX(0); 
  }
  50%{
     transform: rotate(45deg) scaleX(1); 
  }
}