JavaScriptでCSSアニメーションの@keyframesを使う

JavaScriptから@keyframesを使うには

element.styleなどでは指定できないので、
head内にstyleタグを作成し、その中に@keyframesを追加します。

たとえばfadein/fadeoutを作成する

(function() {
	var css, rules, fadein, fadeout;
  
	// styleタグを作成
	css = document.createElement('style');
	css.media = 'screen';
	css.type = 'text/css';
  
	// フェードイン
	fadein = '@keyframes fade-in{' + [
		'0% {opacity: 0}',
		'100% {opacity: 1.0}'
	].join(' ') + '}';
  
	// フェードアウト
	fadeout = '@keyframes fade-out{' + [
 		'0% {opacity: 1.0}',
		'100% {opacity: 0}'
	].join('') + '}';
  
	// ルールをstyleタグに追加
	rules = document.createTextNode([fadein,fadeout].join('\n'));
	css.appendChild(rules);
	
	// head内に作成
	document.getElementsByTagName('head')[0].appendChild(css);
}());