js操作keyframes动态赋值

思路和实现方法都很简单，只是这个api很少会用到。这里记录下来。

function getKeyframes(name){
            var animation={}
            var styleSheets=document.styleSheets
            for(var i=0;i<styleSheets.length;i++){
                var item=styleSheets[i];
                if(item.cssRules[0] && item.cssRules[0].name && item.cssRules[0].name==name){
                    animation.cssRule=item.cssRules[0];
                    animation.styleSheet=item;
                    animation.index=0;
                }
            }
            return animation;
        }

//原生js操作keyframes值
        var testDemo=document.getElementById('testDemo');
        testDemo.onclick=function(){
            var arr=[
                {x:0,y:0},
                {x:-16.91,y:-32.36},
                {x:-29.76,y:-55.91},
                {x:-41.19,y:-72.73},
                {x:-52.00,y:-80.00},
                {x:-61.38,y:-68.68},
                {x:-67.30,y:-52.70},
                {x:-72.79,y:-33.13},
                {x:-78.12,y:-11.13},
                {x:-84.00,y:12.00}
            ];
            var token = window.WebKitCSSKeyframesRule? '-webkit-':'';
            let key_name='testDemo'
            var nameRule=getKeyframes(key_name);
                var rules='@'+token+'keyframes '+key_name+'{';
                for(var i=0;i<arr.length;i++){
                    rules+=(i+1)*10+'%{transform:translate3d('+arr[i].x+'px,'+arr[i].y+'px,0);opacity:'+(i+1)*10/100+';}'
                }
                rules+='}';
            if(JSON.stringify(nameRule)=='{}'){
                var sheet=document.styleSheets[0];
                // console.log('````',rules);
                sheet.insertRule(rules,0);
            }else{
                nameRule.styleSheet.deleteRule(nameRule.index)
                nameRule.styleSheet.insertRule(rules,nameRule.index)
            }
            testDemo.style.animation=key_name+' 2s infinite';
        }