js animationend事件监听动画结束在浏览器中使用不稳定？

demo ：https://jsfiddle.net/y4eaenbr/

有时候等半天才执行alert， 有时候半天都不执行要点一下页面（或者敲一下键盘）才alert，
这个事件为什么这么不稳定？

<script type="text/javascript">
        $("button").on("click", function(){
          $(this).addClass("button").on("animationend webkitAnimationEnd", function() {
            alert("啊哈哈");
          })
        })
</script>

---

测试没问题, 要点页面或者按键盘才会弹出, 这是你浏览器卡alert, 调试用console.log(), 不要用alert

animationend ie9及以下不兼容, chrome和firefox, 基本没什么问题