Hey so I have a div which I want to animate when its being hovered over.

at the moment it says 'logged in as username' but I want to make it so that when I hover over it (im using animate.style) the text fades to the right and a button saying sign out comes in its location where the person can click to sign out but if they hover out of the div for things to go back to the way they were with the same animation.

but I get lots of bugs like, the text constantly changing and bugging out when moving mouse close to it.

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");
                }