CODEWITHSUNDEEP
javascriptjquerycss
Kokodoko
Kokodoko

Reputation: 28128

CSS TransitionEnd not firing

I have created a very basic test for a CSS keyframe animation, including an event listener for 'ontransitionend' - but this 'transition end' listener just won't fire, no matter what variation I use. (my complete code has all the vendor prefixes).

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");

For some reason, I can't get it to work! What am I missing? JSFiddle here

Upvotes: 3

Views: 478

Answers (1)

DaniP
DaniP

Reputation: 38252

The problem is you aren't using the transition property at all instead you are using the keyframe animation. You need animationend:

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

DemoFiddle    and   More Info Link

Upvotes: 5

Related Questions