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);
}());