Append keyframe animations programmatically.

keyframe-animation-append.js

// Does not work in Safari 5
// Technique one:
var lastSheet = document.styleSheets[document.styleSheets.length - 1];
var newName = 'foo';

lastSheet.insertRule("@-webkit-keyframes " + newName + "{ 0% { -webkit-transform: rotateY(0) translate3D(0,0,0);	} 25% { -webkit-transform: rotateY(45) translate3D(0,0,-1000px); } 50% { -webkit-transform: rotateY(90) translate3D(0,0,-2500px);} 75% { -webkit-transform: rotateY(135) translate3D(0,0,-1000px);} 100% { -webkit-transform: rotateY(180) translate3D(0,0,0px);} }", lastSheet.cssRules.length);

document.getElementById('#foo').style.webkitAnimationName = newName;



// Does not work in Safari 5
// Technique one:

var head = document.getElementsByTagName('head')[0],
	    style = document.createElement('style'),
            animName = "bar",
	    rules = document.createTextNode("@-webkit-keyframes " + animName + "{ 0% { -webkit-transform: rotateY(0) translate3D(0,0,0);	} 25% { -webkit-transform: rotateY(45) translate3D(0,0,-1000px); } 50% { -webkit-transform: rotateY(90) translate3D(0,0,-2500px);} 75% { -webkit-transform: rotateY(135) translate3D(0,0,-1000px);} 100% { -webkit-transform: rotateY(180) translate3D(0,0,0px);} } #f1_card{ -webkit-animation: "+animName+" 1s 1; }");
	style.type = 'text/css';
	if(style.styleSheet)
	    style.styleSheet.cssText = rules.nodeValue;
	else style.appendChild(rules);
	head.appendChild(style);

document.getElementById('#bar').style.webkitAnimationName = animName;