jquery html5 webkit-animation callback

Question

Is there any callback on webkit-animation complete? see example

@-webkit-keyframes "blink" {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
.animate {
    background: #000;
    height: 100px;
    width: 100px;
    opacity: 0;
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease;
}

$("div").bind("webkitTransitionEnd", function() {
  alert(1);
}).addClass("animate");

But this callback doesn't work

What doesn't work? Also, it seems this works : http://stackoverflow.com/questions/2087510/callback-on-css-transition — Florian Margaine, Feb 13 '12 at 13:33
I have read alot of documentation about it, and came over certain projects where somebody said its possible some say its not. I found the mozilla documentation for transitions which said its possible https://developer.mozilla.org/en/CSS/CSS_transitions — mas-designs, Feb 13 '12 at 13:36
google chrome 17.0.963.46 beta - this doesn't work because there are no transition in webkit-keyframes. question is about webkit-animation. I dont know what noob invented this css3 & html5 without javascript callbacks. I am confused — puchu, Feb 13 '12 at 13:45
possible duplicate of [How do I re-trigger a WebKit CSS animation via JavaScript?](http://stackoverflow.com/questions/4797675/how-do-i-re-trigger-a-webkit-css-animation-via-javascript) — Paul D. Waite, Apr 29 '12 at 21:17
You want the `webkitAnimationEnd` event. See http://stackoverflow.com/questions/4797675/how-do-i-re-trigger-a-webkit-css-animation-via-javascript — Paul D. Waite, Apr 29 '12 at 21:18

score 2 · Accepted Answer · edited May 23 '17 at 11:51

This will do the trick:

element.addEventListener('webkitAnimationEnd', function(event) { });

in firefox the event is called 'animationend', but some webkit browsers will listen to both of these. Instead what you can do if you use jquery is to use

$element.on('webkitAnimationEnd animationend' , function(event){ });

Update:

I recently had a small mishap using .one('webkitAnimationEnd animationend') since both events are being listened to in chrome, but only one fired at a time, the same function will fire twice on two seperate animation end events.

Instead a small trick could be using a function similar to this:

getTransitionEndEvent : function(){
    switch(this._currentBrowser){
        case enums.Browser.SAFARI:
        case enums.Browser.CHROME:
            return "webkitTransitionEnd";
        case enums.Browser.FIREFOX:
            return "transitionend";
        default:
            console.log("unknown browser agent for transition end event");
            return "";
    }
}

and add more vendor specific prefixes as needed.

In order to identify the browser I can really recommend this:

How to detect Safari, Chrome, IE, Firefox and Opera browser?

jquery html5 webkit-animation callback

1 Answers1