9

            
            main{
  height:100vh;
  position:relative;
  width:100vw;
  &:before, &:after{
    content:'';
    position:absolute;
  }
  &:after{
    width:112.5px;
    height:150px;
    background:linear-gradient(to right, #000 66%, transparent 66%), linear-gradient(to right, #fff 66%, transparent 66%), linear-gradient(to right, #000 66%, #fff 66%);
    top:calc(50% - 75px);
    right:calc(50% - 150px);
    background-size:0% 100%, 0% 100%, 100% 100%;
    background-repeat:no-repeat;
    animation:shift 2s cubic-bezier(0.175, 0.885, 0.32, 1) infinite;
    background-position:left;
    @keyframes shift{
      50%{
        background-size:0% 100%, 100% 100%, 250% 250%;
      }
      100%{
        background-size:100% 100%, 250% 250%, 300% 300%;
      }
    }
  }
  &:before{
    height:300px;
    width:300px;
    top:calc(50% - 225px);
    left:calc(50% - 150px);
    background:radial-gradient(circle at center, #fff 70%, transparent 70%, transparent 100%), radial-gradient(circle at center, #000 70%, transparent 70%, transparent 100%), radial-gradient(circle at center, #fff 70%, transparent 70%, transparent 100%), radial-gradient(circle at center, #000 70%, transparent 70%, transparent 100%), radial-gradient(circle at center, #fff 70%, transparent 70%, transparent 100%);
    background-size:0% 0%, 0% 0%, 25% 25%, 75% 75%, 150% 150%;
    background-repeat:no-repeat;
    background-position:center;
    -webkit-box-reflect: below -150px;
    animation:grow 2s cubic-bezier(0.175, 0.885, 0.32, 1) infinite;
    @keyframes grow{
      50%{
        background-size:0% 0%, 25% 25%, 75% 75%, 150% 150%, 200% 200%;
      }
      100%{
        background-size:25% 25%, 75% 75%, 150% 150%, 225% 225%, 250% 250%;
      }
    }
  }
}