Issues with CSS animation

I'm working a layout that has this "opening curtain" animation (two divs, left and right, that moves towards the center of the screen). But in the end of the animation some bug occurs and the "closing effect" kinda goes front and back.

Any help is welcome :D I just started to learn html and CSS. :)

HTML

<body>
    <div id="left"></div>
    <div id="right"></div>
</body>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    background: red;

}

#left {
    width: 50vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    animation-name: leftwing;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    padding: 0px;
}

#right {
    width: 50vw;
    height: 100vh;
    background-color: yellow;
    position: absolute;
    top: 0;
    right: 0;
    animation-name: rightwing;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    padding: 0px;
}

@keyframes rightwing {
    0% {right: -1000px; background-color: purple;}
    100% {right: 0; background-color: cyan;}
}

@keyframes leftwing {
    0% {left: -1000px; background-color: purple;}
    100% {left: 0; background-color: magenta;}
}