Feature detection for CSS transitions via jQuery $.support

Heads up! This post was written in 2012, so it may contain information that is no longer accurate. I keep posts like this around for historical purposes and to prevent link rot, so please keep this in mind as you're reading.

— Cory

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.