js添加动画属性

 // var rotate = document.querySelector('#rotate')
 //此方法是找到动画属性名
    function findKeyframesRule(animName) {
        var rule;
        var ss = document.styleSheets;
        for (var i = 0; i < ss.length; ++i) {
            for (var x = 0; x < ss[i].cssRules.length; ++x) {
                rule = ss[i].cssRules[x];
                if (rule.name == animName.id) {
                    console.log(rule)
                    return rule;
                }
            }
        }
    }
    rotate.onclick = () => {
    
        var keyframes = findKeyframesRule(rotate);
        console.log(keyframes)
        //此处调用方法,移除动画事件
        keyframes.deleteRule("0%");
        keyframes.deleteRule("100%");
        //此处重新给动画赋名
        document.querySelector('#rotate').style.webkitAnimationName = rotate;
        //此处增加新的动画效果
        keyframes.appendRule("0% { transform: rotate(" + 0 + "deg)}");
        keyframes.appendRule("100% { transform: rotate(" + 10000 + "deg)}")
        rotate.style.webkitAnimationDuration = 10 + 's'
    }