Как использовать javascript для создания анимации при наведении курсора

Здравствуйте, у меня есть div, который я хочу анимировать при наведении на него курсора.

на данный момент там написано 'logged in as username', но я хочу сделать так, чтобы при наведении на него (я использую animate.style) текст исчезал вправо и кнопка с надписью "выйти" появлялась в том месте, где человек может нажать, чтобы выйти. но если они наведут курсор на div, чтобы все вернулось к прежнему виду с той же анимацией.

но я получаю много ошибок, например, текст постоянно меняется и вылетает при приближении мыши к нему.

function loggedInHover() {
                    let signin = document.getElementById("signin");
                    signin.classList.add("animate__animated", "animate__fadeOutRight");
                    setTimeout(function() {
                        signin.style.display = "none";
                        signin.innerHTML = "Sign Out";
                        signin.style.display = "block";
                        signin.classList.remove("animate__fadeOutRight");
                        signin.classList.add("animate__animated", "animate__fadeInLeft");
                    }, 1000);
                }
            function loggedInOut() {
                    let signin = document.getElementById("signin");
                    signin.classList.add("animate__animated", "animate__fadeOutRight");
                    signin.style.display = "none";
                    signin.innerHTML = "logged in as <strong class=\"h3\">{{ user.username }}</strong>";
                    signin.style.display = "block";
                    signin.classList.remove("animate__fadeOutRight");
                    signin.classList.add("animate__animated", "animate__fadeInLeft");
                }

Вернуться на верх