両端からフェードアウトしていくカーテンみたいなアニメーションをcssとjsで作成

右端からフェードアウトしていく風のものはあったのですが両端からは見つからなかったので自作。
白いボックスを両端から出して背景を覆い隠しているだけです。

#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #274bd2;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
        
.fadeout {
    display: none;
}
      
#left_bk,#right_bk {
    width: 0;
    height: 100vh;
    background-color: rgba(255,255,255,0.8);
    border: none;
    position: absolute;
    top: 0;
    z-index: 2;
}       

#line {
    width: 3px;
    height: 100vh;
    background-color: #274bd2;
    border: none;
    position: absolute;
    top: 0;
    left: 47.5vw;
    z-index: 3;
}
#left_bk {  left: 0; }

#right_bk { right: 0; }

.anime5 {
    animation: animemove5 0.3s linear forwards; } /*1.5sかけて*/

.anime7 {
    animation: animemove7 1.5s linear forwards; } 

@keyframes animemove5 {
    0% {}
    100% {width: 50vw;} /*50vwまで拡大*/
}

  @keyframes animemove7 {
    0% {}
    100% {left: calc(100% - 54px);}
}

const body = document.getElementsByTagName('body')[0];

function fadeOut() {
    left_bk.classList.add('fadeout');
    right_bk.classList.add('fadeout');
    loading.classList.add('fadeout');
}

window.onload = function() {
    setTimeout(cartain, 700);
    setTimeout(blueline, 1000);
    setTimeout(fadeOut, 2000);
};

function cartain() {
    left_bk.classList.add('anime5');
    right_bk.classList.add('anime5');            
    $("#loading").animate({ opacity: 0 }, { duration: 500, easing: 'linear'});       
}

function blueline() {
    line.classList.add('anime7');     
}

<div id="loading">
    <div id="left_bk"></div>
    <div id="right_bk"></div>
</div>
    <div id="line"></div>

    <script src="loading.js"></script>