Animation help (ID:1738EH)

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

80 thoughts on “Animation help (ID:1738EH)”

  1. i need car loan for bad credit, i need a loan shark. i need a loan with bad credit fast need loan need a loan i need a loan now with no job, cash advance loans 24 hours, cash advance loans, cash advance loans, cash advance loans for students. Business study of those economics, payment order.

    Reply
  2. Howdy just wanted to give you a brief heads up and let you know a few of the images aren’t loading properly.
    I’m not sure why but I think its a linking issue. I’ve tried it in two different browsers
    and both show the same outcome.

    Reply

Leave a Comment