Javascript WebkitAnimationEnd不是'；不要开枪。有人知道为什么吗？

我最近开始玩弄Javascript，在我的工作中可以看到一些很好的动画终端监听器应用程序。我有以下代码，动画结尾的监听器都没有启动。有人能看出两个听众中有一个不工作的原因吗？我在找镀铬的

#动画测试{
宽度：150px；
文本对齐：居中；
显示：块；
填充：20px；
背景：#000；
颜色：#fff；
边框底部：10px实心红色；
光标：指针；
过渡：边界底部0.5s线性；/*无供应商回退*/
-o型过渡：边框底部0.5s线性；/*opera*/
-ms过渡：边框底部0.5s线性；/*IE 10*/
-moz过渡：边框底部0.5s线性；/*Firefox*/
-webkit过渡：边框底部0.5s线性；/*safari和chrome*/
}
#动画测试：悬停{
边框底部：10px纯蓝色；
}
在我上空盘旋
$（'document'）.ready（函数（）{
var animationTest=document.getElementById（'animationTest'）；
animationTest.addEventListener（'webkitAnimationEnd'，函数（事件）{
警报（“已完成动画（侦听器）！”；
log（“已完成动画（侦听器）！”；
}，假）；
$（'#animationTest'）.bind（“webkitAnimationEnd”，函数（事件）{
警报（“已完成动画（绑定）！”；
log（“完成动画（绑定）！”；
}，假）；
});

---

​

应该是

WebKittTransitionEnd

---

是的，您将CSS转换误认为是动画。他们是两个不同的东西。是的，新手犯了个错误。现在来看看CSS动画。听起来很有趣。

#animationTest {
    width: 150px;
    text-align: center;
    display: block;
    padding: 20px;
    background: #000;
    color: #fff;
    border-bottom: 10px solid red;
    cursor: pointer;
            transition: border-bottom 0.5s linear; /* vendorless fallback */
         -o-transition: border-bottom 0.5s linear; /* opera */
        -ms-transition: border-bottom 0.5s linear; /* IE 10 */
       -moz-transition: border-bottom 0.5s linear; /* Firefox */
    -webkit-transition: border-bottom 0.5s linear; /*safari and chrome */
}

#animationTest:hover {
    border-bottom: 10px solid blue;
}

<a id="animationTest">Hover over me</a>

$('document').ready(function(){
    var animationTest = document.getElementById('animationTest');
    
    animationTest.addEventListener('webkitAnimationEnd', function(event){
            alert("Finished animation (listener)!");
            console.log("Finished animation (listener)!");
        }, false );

        $('#animationTest').bind("webkitAnimationEnd", function(event){
            alert("Finished animation (bind)!");
            console.log("Finished animation (bind)!");
        }, false );
});