javascript - Animation help (ID:1738EH)

Question

When I mouse enter the shoe1 i want the text1 to opacity 1 and go down some pxs, then when i mouseleave i want the text1 to go back to its original position. i want that to keep happening everytime i mouseneter the shoe1. but whats happening is when i mouseenter it does everything fine, the text moves to its px positon, then when i mouse leave and mouse enter again it does not work, the text1 does not appear.

//shoeanim
.shoe-7:hover{
    top: 130px;
}
.textfadein{
    animation: textfadein 1s ease;
    animation-fill-mode: forwards;
}
.textfadein2{
    animation: textfadein 1s ease;
}
@keyframes textfadein{
    to{
        top: 280px;
        opacity: 1;
    }
}
@keyframes textfadein2{
    to{
        top: 271px;
        opacity: 0;
    }
}

const shoe1 = document.querySelector('.shoe-7');
const text1 = document.querySelector('.vans');

shoe1.addEventListener('mouseenter', () =>{
    text1.classList.add('textfadein');
});
shoe1.addEventListener('mouseleave', () =>{
    text1.classList.remove('textfadein');
    text1.classList.add('textfadein2');
});

question from:https://stackoverflow.com/questions/65926129/animation-help-id1738eh

Answer 1

There are a couple of problems with implementing the mouse leave functionality.

First, in the CSS the textfadein2 class has the same keyframes name as the textfadein class. It should be

.textfadein2{
    animation: textfadein2 1s ease;
}

Second, when adding the textfadein class when the mouse moves into the element the textfadein2 class is not removed. As both classes are there, just the furthest down the cascade will be used. Try this:

shoe1.addEventListener('mouseenter', () =>{
    text1.classList.add('textfadein');
    text1.classList.remove('textfadein2');
});