circular transition

HTML

<title>Circular Page Transition - CSS</title>

<div id="main-loader" class="main-loader-animate-circle-hide">
  
  QDSFDS
</div>

CSS

body{
    width:100%;
    height:100%;
    overflow:hidden;
}

#main-loader {
  display: block;
  position: fixed;
  z-index: 214748364;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #666;
  text-align: center;
}

@keyframes mainLoaderCircleShow {
  from {
    transform: scale(0);
    border-radius: 50%;
    opacity: .7;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
  }
  to {
    transform: scale(1);
    border-radius: 50%;
    opacity: 1;
    top: 50%;
    left: 50%;
    width: 3000px;
    height: 3000px;
    margin-left: -1500px;
    margin-top: -1500px;
  }
}

.main-loader-animate-circle-show {
  animation-name: mainLoaderCircleShow;
  transform-origin: top center;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes mainLoaderCircleHide {
  from {
    transform: scale(1);
    border-radius: 50%;
    opacity: 1;
    top: 50%;
    left: 50%;
    width: 3000px;
    height: 3000px;
    margin-left: -1500px;
    margin-top: -1500px;
  }
  to {
    transform: scale(0);
    border-radius: 50%;
    opacity: .4;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
  }
}

.main-loader-animate-circle-hide {
  animation-name: mainLoaderCircleHide;
  transform-origin: top center;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}