javascript - 动画真正结束时不触发 Animationend 事件

Question

这件事让我发疯。

我有这个动画:

.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;
}

这是获取动画结束事件的javascript:

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

这里的问题是这个事件在动画真正结束之前触发，我希望它在持续 5 秒后触发并且只触发一次， 相反，它会在动画开始后一秒触发并触发多次。

我做错了什么？

编辑

在测试了一些解决方案后，发现问题导致了使用:

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

作为脚本的包装器，而不是使用 jQuery 的:

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

因为包装器完全解决了这个问题。

真的是出乎意料的行为，其他人也有同样的问题吗？

Answer 1

我制作了一个 jsfiddle，您的代码对我来说效果很好，请参阅 https://jsfiddle.net/qt8znvsx/4/我不确定 HTML 是否正确，因为你没有给我们，你能看看吗？

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

我已经在 Chrome 和 Firefox 上测试过了。