How to Set Prefixed CSS3 Transitions Using JavaScript

How to set prefixed CSS3 transitions using JavaScript?

You should look here: http://www.javascriptkit.com/javatutors/setcss3properties.shtml

As you can see setting CSS Properties with "-" just results in the next character to be capital:

document.getElementById('fade').style.WebkitTransition = 'opacity 1s';
document.getElementById('fade').style.MozTransition = 'opacity 1s';

Javascript code for CSS3 animation and transform property

When I understand your question correctly you want to do the transform in JS, and not CSS (in that case I'd recommend SASS with the compass framework)

You could do it like this, so the right prefix is used:

var sty = ele.style, transform, transforms = ["webkitTransform", "MozTransform", "msTransform", "OTransform", "transform"];
for (var i in transforms) {
    if (transforms[i] in sty) {
        transform = transforms[i];
        break;
    }
}

and later on:

ele.style[transform] = "whatever transform you like to do";

So you do not have to set each of them, and of course you can reuse the "transform" variable for other elements, so the check only has to be done once.

Enabling vendor prefixes in CSS transitions make callback fires twice

You're not doing anything wrong. Chrome just uses both the prefixed and un-prefixed versions.

There are a couple options:

Using an outside variable.

var fired = false;
jQuery("#main").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
    if ( ! fired ) {
        fired = true;
        console.log("POUM!");
    }
});

Using some kind of detection to get a single variable for transitionend (the below uses Modernizr, and is taken from their documentation):

var transitionend = (function(transition) {
     var transEndEventNames = {
         'WebkitTransition' : 'webkitTransitionEnd',// Saf 6, Android Browser
         'MozTransition'    : 'transitionend',      // only for FF < 15
         'transition'       : 'transitionend'       // IE10, Opera, Chrome, FF 15+, Saf 7+
    };

    return transEndEventNames[transition];
})(Modernizr.prefixed('transition'));

// then
jQuery("#main").one(transitionend, function(e) {
    console.log("POUM!");
});

NOTE:

Safari 6 seems to trigger onload for anything that is set in the CSS. So, if you have (assuming all prefixes)

#main {
    width: 40px;
    height: 40px;
    transition: all 200ms;
}

Safari will trigger the transitionend with width and height on load. There are a couple ways to get around this:

Use more specific transition-property (but if you set that in the CSS, it will still trigger)

Do the following in javascript (it's not the prettiest thing, but it should take care of that edge case and it still works in Chrome) fiddle

var transitionProperty = 'background-color',
    startColor = jQuery("#main").on(transitionend, function(e) {
        var el = $(this);
        if ( transitionProperty === e.originalEvent.propertyName && el.css(transitionProperty) !== startColor ) {
            console.log("POUM!");
            // This is to make it only happen once.
            $(this).off(transitionend);
        }
    }).css(transitionProperty);

What are the issues with getting the vendor prefix for CSS Transitions using javascript?

I don't see anything wrong, but I would probably do it this way:

function getTransitionPrefix() {
    var el = document.createElement( "div" ),
        prefixes = ["Webkit", "Moz", "O", "ms"];
    for ( var i = 0; i < prefixes.length; i++ ) {
        if ( prefixes[i] + "Transition" in el.style ) {
            return prefixes[i];
        }
    }
    return "transition" in el.style ? "" : false;
}

Then setting the transition:

var setTransition = (function() {
    var pref = getTransitionPrefix();
    return function( elem, trans ) {
        if ( pref !== false ) {
            var s = pref === "" ? "transition" : pref + "Transition";
            elem.style[s] = trans;
        }
    };
})();

setTransition( element, "transition settings" );

Browser-specific prefixes with a CSS transition on transform

UPDATE NOTICE Unfortunately it turns out Safari at the time of this post does not follow the standard outlined in the W3 Specification below, and including both a webkit prefixed property and a prefix-less property after transition will cause it to break and not be animated at all. I am still exploring this issue for a good general solution but it looks like until Safari fixes this, there may not be one that works everywhere, and for all future properties, without adjusting your CSS rules per browser dynamically with JavaScript.

If you add an unrecognized or invalid property to a list of transition properties, the valid properties in the list will still be added (except on Safari, see notice above).

According to section 2.1 of the w3 Specification for CSS Transitions:

If one of the identifiers listed is not a recognized property name or is not an animatable property, the implementation must still start transitions on the animatable properties in the list using the duration, delay, and timing function at their respective indices in the lists for ‘transition-duration’, ‘transition-delay’, and ‘transition-timing-function’.

W3 Specification for CSS Transitions

If you take the following style, the width property will still be animated despite being preceded by an invalid and unrecognized property.

transition: unrecognizedProperty 2s, width 2s;

If you follow a transition rule with another transition rule (with the same prefixing or lack thereof), the first rule will be overwritten and no longer applied even if the second rule only has invalid properties listed on the right hand side.

If you try the following style the width will not be animated because the first rule will be overwritten by the second rule, which effectively does nothing since "unrecognizedProperty" is not recognized.

transition: width 2s;
transition: unrecognizedProperty 2s;

Based on this I believe your first approach is correct.

-webkit-transition: -webkit-transform 300ms;
        transition: -webkit-transform 300ms, transform 300ms;

The first rule will only be applied if -webkit-transition is recognized, in which case since transform came out after transition it will definitely have to be prefixed and we can omit the unprefixed transform property (although I don't think it would hurt to leave it). The second rule will only be applied if unprefixed transition is recognized, in which case whichever of the right-hand side properties that are recognized by the browser will be applied, even if other properties in the list are not recognized.

Your second approach is flawed since the second rule will always be overwritten by the third rule regardless of if any properties on the right hand side are or are not recognized.

I believe the complete list of browser prefixed properties to guarantee that you apply transition of 2s to transform on all browsers that are capable is the following, but please read the rational below because it only happens to be this neat for this property pair by chance:

-webkit-transition: -webkit-transform 2s;
   -moz-transition:    -moz-transform 2s;
     -o-transition:      -o-transform 2s;
        transition:         transform 2s;

Note there is no such thing as -ms-transition, but there is a -ms-transform. That being said transition was not added to IE until 10 where -ms-transform was also outdated by unprefixed transform. Hence for IE the only rule we need is "transition: transform".
I will additionally note that any time we have a browser prefix for transition (< Chrome 26, < Firefox 16, < Safari 6.1, < Opera 12.1), then transform was definitely still prefixed as well (< Chrome 36, < Firefox 16, all Safari, < Opera 23), meaning we can leave off the unprefixed version of transform following a prefixed rule.
Since Firefox released unprefixed transition at the same time as their unprefixed transform, we do not need the prefixed "-moz-transform" on the right-hand side of the unprefixed "transition".
Opera at some point used -webkit- prefix for transform in addition to -o-, however they started using -webkit-transform in version 15, after starting to use prefixless transition in version 12.1, so we do not need to include the -webkit-transform after -o-transition. Also since Opera only used prefixless or -webkit-transform after version 12.1, we do not need to include -o-transform after the prefixless transition.
In this case we do not have to include -webkit-transform to the right of prefix-less transition because browsers that only recognize -webkit-tranform will fall back to -webkit-transition and still apply this property.

If you don't mind the length of your CSS though, the following should be a safe generalized solution for ensuring proper browser prefixing of transition and a prefixed right hand property. UPDATE NOTICE As it turns out this approach may not be safe on Safari since they do not follow the W3 standard on ignoring unrecognized properties to the right of transition if there is one that is prefixed and one that is not.

-webkit-transition: -webkit-property,
                            property;
   -moz-transition:    -moz-property,
                            property;
    -ms-transition:     -ms-property,
                            property;
     -o-transition:      -o-property,
                    -webkit-property,
                            property;
        transition: -webkit-property,
                       -moz-property,
                        -ms-property,
                         -o-property,
                            property;

Detect CSS transitions using Javascript (and without modernizr)?

Perhaps something like this. Basically it's just looking to see if the CSS transition property has been defined:

function supportsTransitions() {
    var b = document.body || document.documentElement,
        s = b.style,
        p = 'transition';

    if (typeof s[p] == 'string') { return true; }

    // Tests for vendor specific prop
    var v = ['Moz', 'webkit', 'Webkit', 'Khtml', 'O', 'ms'];
    p = p.charAt(0).toUpperCase() + p.substr(1);

    for (var i=0; i<v.length; i++) {
        if (typeof s[v[i] + p] == 'string') { return true; }
    }

    return false;
}

Adapted from this gist. All credit goes there.

What is the right combination of prefixes for CSS transitions and transforms?

As I mentioned in a very similar question...

This is one of those cases where vendor prefixes for standardized features become extremely problematic, because you need to account for all the different prefixed and/or unprefixed implementations of different features in different versions of different browsers.
What a mouthful. And then you have to combine various permutations of these. What a handful.
In short, you need to figure out which versions of each browser requires a prefix for each of the individual properties, and unless you don't mind the bloat, you will need to apply the prefixes differently for individual browsers.

The linked question refers to animations rather than transitions which results in significantly different notations, but both features went through similar unprefixing processes AFAIK. That being said, here are the compatibility tables from caniuse.com for 2D transforms and transitions.

In other words, just because one feature is prefixed in one version of one browser doesn't mean the other feature is necessarily also prefixed in the same version of the same browser. For example, Chrome unprefixed transitions at least ten major versions (26) before it unprefixed transforms (36), and Safari still requires prefixes for transforms. As a result, you're definitely going to have to have this declaration:

transition: -webkit-transform .3s ease-in-out;

And if you absolutely need to, you will have to cover even older versions with the following:

-webkit-transition: -webkit-transform .3s ease-in-out;

Other browsers, miraculously, were able to unprefix both transitions and transforms (as well as animations) simultaneously, which makes things much easier:

-ms-transition is only used by pre-release versions of IE10, which have long since expired. No other version of IE uses prefixed transitions, so you should remove that particular transition prefix.
-ms-transform with the prefix is only used by IE9; IE10 and later ship with unprefixed transforms. But for the purposes of graceful degradation you may want to keep your -ms-transform: rotateX(-30deg); declaration — just keep in mind that it cannot be transitioned as IE9 does not support CSS transitions or animations.
-moz-transition and -moz-transform were used by Firefox up to and including 15, then unprefixed in 16.
-o-transition and -o-transform were used by Opera up to and including 12.00, then unprefixed in 12.10, then re-prefixed as -webkit- in later versions in its move to Blink.

In summary, here are all the prefixes that you need, based on the information given by caniuse.com (which I trust to be current and accurate for the most part):

-webkit-transition: -webkit-transform .3s ease-in-out; /* Chrome < 26, Safari < 7 */
   -moz-transition:    -moz-transform .3s ease-in-out; /* Firefox < 16 */
     -o-transition:      -o-transform .3s ease-in-out; /* Opera < 12.10 */
        transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */
        transition:         transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg); /* Only for graceful degradation in IE9, cannot be transitioned */
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

The bare minimum that you will need to support the latest version of each browser as of this writing is:

        transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */
        transition:         transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */

 -webkit-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

As mentioned in the comments, you can use a tool like Autoprefixer to automate this for you based on the level of browser support you require. However, for those who prefer to write their CSS manually, or for those who are just wondering exactly which prefixes are needed by which browsers, this is it.

On a final note: notice the two unprefixed transition declarations in the above examples? Now, you'd think it'd be easy enough to just combine them into a single declaration like this:

transition: -webkit-transform .3s ease-in-out, transform .3s ease-in-out;

But, unfortunately, Chrome will erroneously completely ignore this declaration, while other browsers will apply it just fine.

CSS 3 - transition prefixes - which ones to use?

http://caniuse.com/#search=transition says that you need -webkit- and plain property for modern browsers.

-webkit-transition: all .5s ease;
transition: all .5s ease;

But it will be no problem if you add all of them, just be sure that property without prefix is the last one.

Edit: as said in comment below, if you click on "All versions" you can see when each browser dropped prefix. For now it is better to use -moz- and -o- also.

Edit May 2015: I highly recommend use Autoprefixer as step on your build process (like Gulp/Grunt task) or as plugin to your code editor. It provides automatic prefixing on caniuse.com browser support stats.

Edit 2019: No need in prefixes and less and less need in Autoprefixer, future is nice :)

How to Set Prefixed CSS3 Transitions Using JavaScript