Detect CSS transitions using Javascript (and without modernizr)?

Question

How would I detect that a browser supports CSS transitions using Javascript (and without using modernizr)?

Using minified Modernizr to test for CSS transitions only, the entire block of code is just over 2000 bytes. Larger than the other tests posted here, but hardly enough to trouble a user. (I prefer Modernizr because sooner or later, every website grows and needs more than one of its tests.) — Blazemonger
– Blazemonger, Commented Nov 25, 2013 at 14:52
I will never understand the motivation of people suggesting something that the asker has specifically asked to NOT use. — L0j1k
– L0j1k, Commented Jun 10, 2014 at 18:52

David Sherret · Accepted Answer · 2014-04-21 03:49:41Z

48

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.

edited Apr 21, 2014 at 3:49

David Sherret

108k28 gold badges197 silver badges190 bronze badges

answered Sep 1, 2011 at 0:37

vcsjones

142k34 gold badges300 silver badges294 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Paul Irish Over a year ago

I submitted a change for Ms => ms, which is how IE exposes their vendor prefixes dom styles. (They're weird.) Toby, why are you trying to do this sans-Modernizr?

Toby Hede Over a year ago

@paul trying to get the latency and size down (way down), and modernizer is quite large for this single detection that we need.

Paul Irish Over a year ago

toby, modernizr has a modular build generator which gets the filesize WAY down. You should take a look. Right now this code will fail to detect transition support in IE10. Such is the case with reinventing wheels. :/

Paul Irish Over a year ago

@vcsjones, can you update the code to use ms instead of Ms?

leopic Over a year ago

didn't know there was such a thing as a 'style' object inside an element, good stuff

|

vsync · Accepted Answer · 2014-03-20 21:31:16Z

3 ways of doing so:

var supportsTransitions  = (function() {
    var s = document.createElement('p').style, // 's' for style. better to create an element if body yet to exist
        v = ['ms','O','Moz','Webkit']; // 'v' for vendor

    if( s['transition'] == '' ) return true; // check first for prefeixed-free support
    while( v.length ) // now go over the list of vendor prefixes and check support until one is found
        if( v.pop() + 'Transition' in s )
            return true;
    return false;
})();

console.log(supportsTransitions) // 'true' on modern browsers

OR:

var s = document.createElement('p').style,
        supportsTransitions = 'transition' in s ||
                              'WebkitTransition' in s ||
                              'MozTransition' in s ||
                              'msTransition' in s ||
                              'OTransition' in s;

console.log(supportsTransitions);  // 'true' on modren browsers

If you actually want to use the right prefixed, use this:

function getPrefixed(prop){
    var i, s = document.createElement('p').style, v = ['ms','O','Moz','Webkit'];
    if( s[prop] == '' ) return prop;
    prop = prop.charAt(0).toUpperCase() + prop.slice(1);
    for( i = v.length; i--; )
        if( s[v[i] + prop] == '' )
            return (v[i] + prop);
}

// get the correct vendor prefixed property
transition = getPrefixed('transition');
// usage example
elment.style[transition] = '1s';

Celmaun · Accepted Answer · 2015-04-12 15:19:06Z

4

As of 2015, this one-liner should do the deal (IE 10+, Chrome 1+, Safari 3.2+, FF 4+ and Opera 12+):-

var transitionsSupported = ('transition' in document.documentElement.style) || ('WebkitTransition' in document.documentElement.style);

answered Apr 12, 2015 at 15:19

Celmaun

24.9k9 gold badges73 silver badges59 bronze badges

Comments

Angolao · Accepted Answer · 2013-05-19 09:28:07Z

2

Here the way I used:

    var style = document.documentElement.style;

    if (
        style.webkitTransition !== undefined ||
        style.MozTransition !== undefined ||
        style.OTransition !== undefined ||
        style.MsTransition !== undefined ||
        style.transition !== undefined
    )
    {
        // Support CSS3 transititon
    }

answered May 19, 2013 at 9:28

Angolao

9923 gold badges15 silver badges27 bronze badges

2 Comments

naor Over a year ago

checking for undefined is better with: typeof (style.webkitTransition) !== "undefined"

bm_i Over a year ago

Its only better when not in strict mode because undefined could be re-assigned by someone lazy/mischievous, style.webkitTransition !== void(0) is better (faster) for non-strict mode use... However we should all be using "use strict" in our code.

user1159910 · Accepted Answer · 2013-01-23 09:24:33Z

0

Also you can use the following approach (kind of one line function):

var features;
(function(s, features) {
    features.transitions = 'transition' in s || 'webkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s;
})(document.createElement('div').style, features || (features = {}));

console.log(features.transitions);

answered Jan 23, 2013 at 9:24

user1159910

Collectives™ on Stack Overflow

Detect CSS transitions using Javascript (and without modernizr)?

5 Answers 5

11 Comments

3 ways of doing so:

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

11 Comments

3 ways of doing so:

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related