Smooth transition between divs

I have 2 modals (box1 and box2) and right now I’m using “data-aos=fade up” to make a transition from modal 1 to modal 2 but that’s not the transition I want. How can I make a smooth transition, that when I click the first modal’s button my modal 2 comes kind of from the right to the place he should be (center)?

const BUTTON_1 = document.querySelector('.botaoEnviar1');
        const BUTTON_2 = document.querySelector('.botaoEnviar2');
        const BOX_1 = document.querySelector('.box');
        const BOX_2 = document.querySelector('.box2');
        const BOX_3 = document.querySelector('.box3');

        BUTTON_1.addEventListener('click', function() {
        BOX_1.classList.add('d-none');
        BOX_2.classList.remove('d-none');
        })

        BUTTON_2.addEventListener('click', function() {
        BOX_2.classList.add('d-none');
        BOX_3.classList.remove('d-none');
        })
.conteudo {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 1;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    display: flex;
    justify-content: center;
    overflow: auto;
}

@keyframes smooth {
    from {
      opacity: 0.3;
    }
    to {
      opacity: 1;
    }
}

.box, .box2 {
    width: 100%;
    margin: 0!important;
    max-width: 500px;
    background-color: #F5F5F5;
    border-radius: 24px 24px 0px 0px;
    position: absolute;
    bottom: 0;
    animation: smooth 1s ease-in-out;
}

.boxes {
    padding: 20px 22px 20px 22px;
    position: relative;
}

.formBox {
    background-color: #fff;
    border-radius: 8px;
    padding: 32px 16px;
    margin-bottom: 32px;
}

.lineForm {
    display: flex;
    flex-direction: column;
    max-width: 402px;
    margin: 0 auto;
}

.itemForm {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.d-none {
    display: none;
}
<div class="conteudo">
        <div class="box" data-aos="fade-up" data-aos-duration="800">            
            <div class="boxes">
                <div class="modalTxt text-center">
                    <h1 class="my-3">Dietas e treinos
                    personalizados, com
                assistência de profissionais.</h1>
                </div>
                <div class="contentForm">
                    <div class="lineForm">
                        <div class="itemForm">
                            <input id="email" name="Email" type="text" class="formInput" required="">
                            <label>email</label>
                        </div>
                    </div>
                    <div class="lineButton mt-3 mb-4">
                        <button type="submit" class="botaoEnviar1">VAMOS LÁ</button>
                    </div>  
                </div>             
            </div>     
        </div>
        <div class="box2 d-none">            
            <div class="boxes">
                <div class="modalTxt text-center">
                    <h1 class="mt-5 mb-4 titulo2">Falta pouco agora...</h1>
                </div>
                <div class="contentForm">
                    <div class="lineForm pt-2">
                        <div class="itemForm">
                            <div>
                                <input id="nome" name="Nome" type="text" class="formInput" required="">
                                <label for="nome">Nome</label>
                            </div>
                            <div>
                                <input id="sobrenome" name="Sobrenome" type="text" class="formInput" required="">
                                <label for="sobrenome">Sobrenome</label>
                            </div>
                        </div>
                        </div> 
                    </div>
                    <div class="lineButton my-3">
                        <button type="submit" class="botaoEnviar2">CADASTRAR E CONTINUAR</button>
                    </div>         
                </div>             
            </div>          
        </div>