1

I am trying to animate div on mouseenter but it works only once; it works again if I reload the page. I use CSS keframes for animation.

const notes_animation = document.querySelectorAll(".note");

for (i = 0; i < notes_animation.length; i++) {
    notes_animation[i].addEventListener('mouseenter', function() {

        let dot = this.querySelectorAll(".backgr_color")[0];
        console.log("Hello 1")
        dot.style.animation = "animate_notes 2500ms ease";
        console.log("Hello 2")
        let note_text = this.querySelectorAll(".note_text")[0];
        let note_comment = this.querySelectorAll(".note_comment")[0];
        let note_bottom = this.querySelectorAll(".note_bottom")[0];

        note_text.style.animation = "animate_text 2700ms ease";
        note_comment.style.animation = "animate_text 2700ms ease";
        note_bottom.style.animation = "animate_text 2700ms ease";

    });
}

I can see the console.log Hello 1 and Hello 2 every time I mouseenter but the animation is performed only on the first mouseenter.

Eve Larson
  • 11
  • 1
  • 2
    well the animation is not removed after it is done.... https://stackoverflow.com/questions/6268508/restart-animation-in-css3-any-better-way-than-removing-the-element – epascarello Aug 01 '23 at 21:06

0 Answers0