helper js for css3 animation

css3animation.js

var animation = {};

animation.prefix = '';

animation.transformName = '';

animation.animationName = '';

animation.perspectiveName = '';

animation.animationEndName = '';

animation.animationStartName = '';

animation.animationIterationName = '';

animation.findSupportedPropertyName = function(prefixedPropertyNames) {
  var div = document.createElement('div');
  for(var i = 0, l = prefixedPropertyNames.length; i < l; i++) {
    if( div.style[prefixedPropertyNames[i]] !== undefined ) {
      return prefixedPropertyNames[i];
    }
  }
};

animation.detectPrefix = function() {
  //fix the attribute names
  animation.transformName = animation.findSupportedPropertyName(["transform", "msTransform", "MozTransform", "WebkitTransform", "OTransform"]);
  animation.animationName = animation.findSupportedPropertyName(["animation", "msAnimation", "MozAnimation", "WebkitAnimation", "OAnimation"]);
	animation.perspectiveName = animation.findSupportedPropertyName(["perspective", "msPerspective", "MozPerspective", "WebkitPerspective", "OPerspective"]);
  //fix the animation event names
  animation.animationEndName = (animation.animationName + "End").replace(/^ms/, "MS").replace(/^Webkit/, "webkit").replace(/^Moz.*/, "animationend").replace(/^animationEnd$/, "animationend");
  animation.animationStartName = (animation.animationName + "Start").replace(/^ms/, "MS").replace(/^Webkit/, "webkit").replace(/^Moz.*/, "animationstart").replace(/^animationStart$/, "animationstart");
	animation.animationIterationName = (animation.animationName + "Iteration").replace(/^ms/, "MS").replace(/^Webkit/, "webkit").replace(/^Moz.*/, "animationiteration").replace(/^animationIteration/, "animationiteration");
  
  //get prefix string
  if (animation.animationName == "msAnimation") {
  	animation.prefix = "-ms-";
	} else if (animationName == "MozAnimation") {
		animation.prefix = "-moz-";
	} else if (animationName == "WebkitAnimation") {
		animation.prefix = "-webkit-";
	} else if (animationName == "OAnimation") {
		animation.prefix = "-o-";
	}
};

animation.applyAnimationToElement = function(element, animName) {
  var animationName = animation.animationName;
	if (element.style[animationName + "Name"] == animName) {
  	// If we are reapplying an animation, we need to zero out the value and then reset the property after the function returns.
		element.style[animationName + "Name"] = "";
		setTimeout(function() { element.style[animationName + "Name"] = animName; });
	} else {
		element.style[animationName + "Name"] = animName;
	}
}

animation.SetupAnimationParameters = function(element) {
  var animationName = animation.animationName;
  element.style[animationName + "Delay"] = "0.0s";
	element.style[animationName + "Duration"] = "1s";
	element.style[animationName + "IterationCount"] = "1";
	// Setting animation-fill-mode to "forwards" will preserve the to{} keyframe values after the animation is complete. 
	element.style[animationName + "FillMode"] = "forwards";
	element.style[animationName + "TimingFunction"] = "linear";
	element.style[animationName + "PlayState"] = "running";
};

animation.isAnimationTransformSupported = function() {
  if (animation.animationName && animation.transformName) {
  	return true;
	}
	return false;
};

This gist is from here.