CSS TransitionEnd没有触发

Question

我为CSS关键帧动画创建了一个非常基本的测试，包括用于＆＃39; ontransitionend＆＃39;的事件监听器。 - 但这个过渡结束了＃39;无论我使用什么样的变化，听众都不会开火。 （我的完整代码包含所有供应商前缀）。

HTML

<div id="block">I like to move it</div>

CSS

.tweetanimation {
    -webkit-animation: Tweet_FadeInOut 6s 1 forwards;
}

@-webkit-keyframes Tweet_FadeInOut {
  0% {
    opacity:0;
    left:30%;
  }
  30%, 70% {
    opacity:1;
    left:15%;
  }
  100% {
    opacity: 0;
    left:0%;
  }
}

JAVASCRIPT

$("#block").one('webkitTransitionEnd msTransitionEnd transitionend', function(e) {
        alert("block has finished moving");
});

$("#block").addClass("tweetanimation");

出于某种原因，我无法让它发挥作用！我错过了什么？ JSFiddle here

Answer 1

问题是你根本没有使用transition属性而是使用关键帧动画。您需要animationend：

$("#block").one('webkitAnimationEnd msAnimationEnd animationend', function(e) {
    alert("block has finished moving");
});
$("#block").addClass("tweetanimation");

DemoFiddle 和 More Info Link