CSS3 transitions

gistfile1.js

function prefixed(props) {
	// Function to find out what prefix this browser supports and get the
	// prefixed versions of a list of properties.
	var prefixes = ['Moz', 'Khtml', 'Webkit', 'O', 'ms'],
		elem = document.createElement('div'),
		uppers = [],
		i;
	if (props[0] in elem.style) {
		return props;
	}
	for (i = 0; i < props.length; i++) {
		var prop = props[i];
		uppers.push(prop.charAt(0).toUpperCase() + prop.slice(1));
	}
	for (var len = prefixes.length; len--; ) {
		if ((prefixes[len] + uppers[0]) in elem.style) {
			var ret = [];
			for (i = 0; i < uppers.length; i++) {
				var upper = uppers[i];
				ret.push(prefixes[len] + upper);
			}
			return ret;
		}
	}
	return false;
}


// Get the transition event names for each browser:
var transEndEventNames = {
	'WebkitTransition' : 'webkitTransitionEnd',
	'MozTransition'    : 'transitionend',
	'OTransition'      : 'oTransitionEnd',
	'msTransition'     : 'msTransitionEnd', // maybe?
	'transition'       : 'transitionEnd'
	},
	transitionProperties = prefixed(['transition', 'transitionProperty', 'transitionDuration', 'transitionTimingFunction']),
	transitionEnd = transEndEventNames[transitionProperties[0]],
	transitionProperty = transitionProperties[1],
	transitionDuration = transitionProperties[2],
	transitionTimingFunction = transitionProperties[3];


function animate(object, properties, duration, easing, complete) {
	// Function to animate an object using CSS3 transitions when possible
	// fallback to jQuery.animate() otherwise
	if (transitionProperties) {
		var originalTransitionProperty = object.style[transitionProperty],
			originalTransitionDuration = object.style[transitionDuration],
			originalTransitionTimingFunction = object.style[transitionTimingFunction];
		object.style[transitionProperty] = 'all';
		object.style[transitionDuration] = ((!duration && duration !== 0) ? 500 : duration) + 'ms';
		if (easing) object.style[transitionTimingFunction] = easing;
		for (var property in properties) {
			if(properties.hasOwnProperty(property)) {
				var value = properties[property],
					camelProperty = property.replace(/-([a-z])/gi, function(s, g) { return g.toUpperCase(); });
				object.style[camelProperty] = value;
			}
		}
		var eventHandler = function() {
			object.removeEventListener(transitionEnd, eventHandler, false);
			object.style[transitionProperty] = originalTransitionProperty;
			object.style[transitionDuration] = originalTransitionDuration;
			if (easing) object.style[transitionTimingFunction] = originalTransitionTimingFunction;
			if (typeof complete == 'function') complete();
		};
		object.addEventListener(transitionEnd, eventHandler, false);
	} else if (jQuery) {
		jQuery.animate(properties, duration, easing, complete);
	}
}