How to Normalize the Css3 Transition End Events Across Browsers

How do I normalize the CSS3 transition end events across browsers?

There's a technique used in Modernizr, improved:

function transitionEndEventName () {
    var i,
        undefined,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

    for (i in transitions) {
        if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
            return transitions[i];
        }
    }

    //TODO: throw 'TransitionEnd event is not supported in this browser'; 
}

Then you can just call this function whenever you need the transition end event:

var transitionEnd = transitionEndEventName();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);

CSS3 transition events

W3C CSS Transitions Draft

The completion of a CSS Transition generates a corresponding DOM Event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition.

Webkit

To determine when a transition completes, set a JavaScript event listener function for the DOM event that is sent at the end of a transition. The event is an instance of WebKitTransitionEvent, and its type is webkitTransitionEnd.

box.addEventListener( 'webkitTransitionEnd', 
    function( event ) { alert( "Finished transition!" ); }, false );

Mozilla

There is a single event that is fired when transitions complete. In Firefox, the event is transitionend, in Opera, oTransitionEnd, and in WebKit it is webkitTransitionEnd.

Opera

There is one type of transition event
available. The oTransitionEnd event
occurs at the completion of the
transition.

Internet Explorer

The transitionend event occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.

Stack Overflow: How do I normalize CSS3 Transition functions across browsers?

CSS Transition cross browser

It is no longer valid. As per this caniuse table, transitions are supported without prefix in all major browsers.

However, you should still handle the case where transitions aren't supported at all. I would suggest simplifying your code:

function onTransitionEnd(element,callback) {
    if( 'transition' in document.documentElement.style) {
        element.addEventListener('transitionend',callback);
    }
    else callback();
}

You can then make note in the callback as to whether or not you have an event object:

function theFunctionToInvoke(evt) {
    if( evt) {
        // function was called on transition end
    }
    else {
        // transitions not supported, function was called immediately
    }
}

transitionend event fires twice

transitionend fires for each property transitioned, in your case top and left.

You can access the property associated with the event at event.propertyName.

There's no "transitionsend" event, so you will probably need some hackiness such as filtering the transitionend callback handling for only one of the transitioned properties. E.g.:

function (event) {
    if (event.propertyName == 'top') {
        //put your code here
    }
});

ps. No browser fires the MSTransitionEnd event. It was at some point in the MS docs, but sometime before the IE10 beta release it was replaced by the standard transitionend event.

Normalize styles across browsers with system fonts function

Looks like what you've send is scss alternative for normalize.css (https://github.com/necolas/normalize.css) and if you're familiar HTML and CSS and don't want to get in touch with NPM you could use css version and just include this file: https://necolas.github.io/normalize.css/latest/normalize.css in your code. This should add all the rules you need and behave as expected.

Why does this callback not unbind itself to transitionEnd after completing one animation?

The docs for .one() explicitly state: "If the first argument contains more than one space-separated event types, the event handler is called once for each event type.".

I don't know if there is a more proper way to deal with this type of event (listening for only one event name would probably work but I donno how that'd work cross-browser). But in any case you can just unbind it yourself with .off(), and you can use an event namespace to make that easier:

$(".my_butt").on("click", function (e) {
    $(".block").addClass("in");

    $(".block").on("transitionend.my MSTransitionEnd.my webkitTransitionEnd.my oTransitionEnd.my", function (e) {
        var el = $(this);
        el.off('.my');
        setTimeout(function () {
            el.removeClass("in");
        }, 3000);
    });
});

JSFiddle: http://jsfiddle.net/DVC5A/6/

css3 cross browser transforms not working

Looking at your code I'm guessing that it could be the transitionend event that is your problem. different browsers throw different events. Se How do I normalize CSS3 Transition functions across browsers?

document.getElementById('').addEventListener('transitionend', function(event) {

Callback on CSS transition

I know that Safari implements a webkitTransitionEnd callback that you can attach directly to the element with the transition.

Their example (reformatted to multiple lines):

box.addEventListener( 
     'webkitTransitionEnd', 
     function( event ) { 
         alert( "Finished transition!" ); 
     }, false );