Feature Detection for CSS Transitions via jQuery $.support

When working with CSS transitions, the need to detect whether or not the browser supports them may arise.  It can be of particular use when working with the transitionend event, which won't fire in unsupportive browsers.

After finding a number of questionable solutions, I came across this gist that extends jQuery's $.support nicely.

$.support.transition = (function(){
    var thisBody = document.body || document.documentElement,
        thisStyle = thisBody.style,
        support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined;
    return support;
})();

The value of $.support.transition will be true or false depending on the browser's capabilities.

Author avatar

About the author

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.