效果演示，生成常用css3动画组件，代码见 css3-animation.js

JS2CSSKeyframes

示例一 普通用法，js生成动画，css通过animation属性调用

    代码部分：
        css: #dot1{
                -webkit-animation:fly 1s linear alternate infinite;
                -moz-animation:fly 1s linear alternate infinite;
                animation:fly 1s linear alternate infinite;
            }

        js: new JS2CSSKeyframes('fly',{
                from:'transform:translate(0,0)',
                to:'transform:translate(100px,0)'
            });

    等同于 new JS2CSSKeyframes('fly',['transform:translate(0,0)','transform:translate(100px,0)']);

示例二 通过js添加匿名动画

    代码部分：document.querySelector('#dot1').style.cssText=JS2CSSKeyframes.vendor+'animation:'+JS2CSSKeyframes([
                    'transform:translate(0,0)',
                    'transform:translate(100px,0)'
                ]).name+' 1s linear alternate infinite';

        或者：document.querySelector('#dot1').style[JS2CSSKeyframes.animation]=JS2CSSKeyframes([
                    'transform:translate(0,0)',
                    'transform:translate(100px,0)'
                ]).name+' 1s linear alternate infinite';

示例三 通过JS2CSSKeyframes生成复杂多帧复杂动画

    代码部分：var kfs=[],num=100,rand=function(f,t){return Math.random()*t+f}
                while(num){
                    kfs.push({transform:'scale('+rand(0,2)+')',background:'rgba('+parseInt(255*Math.random())+','+parseInt(255*Math.random())+','+parseInt(255*Math.random())+','+Math.random()+')'});
                    num--;
                }
                document.querySelector('#dot3').style[JS2CSSKeyframes.animation]=JS2CSSKeyframes(kfs).name+' 60s linear alternate infinite';