mouseenter fires only once (js)

Question

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.