Отображение: ни один не удаляется из потока веб-сайта

Question

Я пытаюсь добавить анимацию успеха к моей кнопке. Но скрытое сообщение об успехе все еще занимает место на веб-сайте, когда оно должно быть скрыто.

Вот изображение этой анимации: https://imgur.com/a/dkgvPqO

 const button   = document.querySelector('.button.stroke'),
        stateMsg = document.querySelector('.pre-state-msg');

    const updateButtonMsg = function() {
        button.classList.add('state-1', 'animated');
        setTimeout(setInitialButtonState, 2000);
    };

    const setInitialButtonState = function() {
        button.classList.remove('state-1', 'animated');
    };

    button.addEventListener('click', updateButtonMsg);

    button.stroke,
        .button.stroke {
            overflow: hidden;
            background: transparent !important;
            color: #64a19d;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
        }

        .button.stroke:hover, .button.stroke:focus {
            border: 2px #1b1e21;
        }

        .button.stroke.animated {
            -webkit-animation: 0.75s short-press cubic-bezier(0.77, 0, 0.175, 1) forwards;
            animation: 0.75s short-press cubic-bezier(0.77, 0, 0.175, 1) forwards;
        }
        .button.stroke > span {
            overflow: hidden;
            text-align: center;
        }

        .button.stroke > span.pre-state-msg {
            -webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);
            transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);
        }

        .button.stroke.state-1 .pre-state-msg {
            margin-top: -38px;
        }

               <div class="row contents"> 
                <div class="home-content-left">
                    <form id="earlyAccessEmail" method="POST">
                        <h1 data-aos="fade-up">Clearing the confusion with product ingredients</h1>
                            <div class="buttons aos-init aos-animate" data-aos="fade-up">
                                <label>
                                    <input id="email" type="text" class="smoothscroll email stroke" placeholder="name@email.com">
                                    <button type="submit" value="Get Early Access" class="state-0 button stroke"><span class="pre-state-msg">Submit</span><span class="done-state-msg hide">Done!</span></button>
                                </label>
                            </div>
                    </form>
                </div>