Animationend event not firing when animation really ends

Question

this thing is making me crazy.

I have this animation:

.animated-debug {
    -webkit-animation-duration: 5s;
            animation-duration: 5s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}
@-webkit-keyframes bounceInAlt {
    from, 70%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.6, 0.355, 1);
                animation-timing-function: cubic-bezier(0.215, 0.6, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0, 0, 0);
                transform: scale3d(0, 0, 0);
    }
    70% {
        -webkit-transform: scale3d(1.01, 1.01, 1.01);
                transform: scale3d(1.01, 1.01, 1.01);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceInAlt {
    from, 70%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.6, 0.355, 1);
                animation-timing-function: cubic-bezier(0.215, 0.6, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0, 0, 0);
                transform: scale3d(0, 0, 0);
    }
    70% {
        -webkit-transform: scale3d(1.01, 1.01, 1.01);
                transform: scale3d(1.01, 1.01, 1.01);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

.bounce-in-alt {
    -webkit-animation-name: bounceInAlt;
            animation-name: bounceInAlt;
}

and this is the javascript for getting the animation end event:

 $("#my_id").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
        console.log("Entrato in animation end.");
    });

The problem here is that this event fire before the animation really ends, I would expect it to fire after the 5 seconds of duration and only once, instead it fires like one second after the animation start and multiple times.

What I am doing wrong?

EDIT

After testing out some solutions it turns out that the problem resulted in the usage of:

document.addEventListener("DOMContentLoaded", function() { ... });

as wrapper for the script, instead using jQuery's:

$(document).ready(function() { ... });

as wrapper completely solved the issue.

Really un unexpected behaviour, some others had the same issue?

Answer 1

I've made a jsfiddle and your code works good for me, see https://jsfiddle.net/qt8znvsx/4/ I'm not sure if the HTML is correct cause you didn't give it to us, could you have a look please?

<div id="my_id">
    <div class="animated-debug bounce-in-alt">
        Helloo is it me? You're looking for
    </div>
</div>

I've tested this on Chrome and Firefox.