I am trying to collapse a box using css animation. After the animation, I want to make the box disappear and then show my page. However, after the box collapses it reappear again. I tried setting the display to none but it still doesn’t work.

index.html

    <div class="boxes-container">
        <div class="boxes">
            <div id="box1"></div>
            <div id="box2"></div>
            <div id="box3"></div>
        </div>
    </div>

styles.css

.boxes-container {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: red;
    animation: collapse 2s linear;
}

#box1,
#box2,
#box3 {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
}

#box1 {
    background-color: yellow;
    width: 100%;
    z-index: 2;
}

#box2 {
    background-color: black;
    width: 150%;
    z-index: 1;
}

#box3 {
    background-color: blue;
    width: 200%;
}


@keyframes collapse {
    0% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}

What I tried: I tried setting display to none, left:-200%

What I want: I want the animation to collapse the box and make it disappear and then show my page

What happened: Animation collapse the box, but then the box reappear