Freely overflowing fixed element

I a taking fun with animations in preloader and I got stuck with animation.

i have this ".hole" that is round, have no background, 0px width and height, and 99999px of box shadow. Thanks to it I can enlarge it and have "hole in screen"

Thing is, that I need to make it bigger than screen to not show user that it is disappering on the end of animation. BUT. when I am making it bigger, and bigger, it getting stuck on left side of screen.

I can move it in animation, but then it is not centered and it is destroying whole idea of this animation.

(".hole" is getting ".animated" class from script)

   .hole {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0px;
  height: 0px;
  border-radius: 500vw;
  box-shadow: 0 0 0 99999px rgba(0, 0, 0, 1);
  z-index: 1000;
}

.animated
{
          animation-delay: 200ms;
          animation-name: makebig;
animation-duration: 2s;
animation-direction: forwards;
opacity: 1;
}

@-webkit-keyframes makebig {
  0% {
    width: 0px;
    height: 0px;

  }

  40%{
border: 50px solid #ff6f00;
width: 0px;
height: 0px;
  }

  100% {

    width: 150vw;
    height: 150vw;
    border: 50px solid #ff6f00;
  }
  }