js 动态修改keyframes时 insertRule is not a function

Question

想通过js来修改keyframes 里的动画效果,能打印出来对应的cssRule ,deleteRule也生效,但是insertRule 报错 is not a funcution

下面是打印出来未删除动画时候的keyframes

`findKeyframesRule(animName) {

        let rule;
        let ss = document.styleSheets;
        for (let i = 0; i < ss.length; ++i) {
            for (let x = 0; x < ss[i].cssRules.length; ++x) {

                rule = ss[i].cssRules[x];

                if (rule.name === animName && (rule.type === CSSRule.KEYFRAMES_RULE || ss[i].cssRules[x].type === CSSRule.WEBKIT_KEYFRAMES_RULE)) {
                    return rule; // 可改为 console 查看当前页中所有动画属性值
                }
            }
        }
    },
    change(selector, animName) {

        let keyframes = this.findKeyframesRule(animName);
        console.log(keyframes);
        // 删除已经存在的开始和结束帧
        keyframes.deleteRule('0%');
        keyframes.deleteRule('100%');
        keyframes.insertRule('0% { -webkit-transform: translateX(0); }'); //结束移动屏幕一半
        keyframes.insertRule('100s% { -webkit-transform: translateX(-300%); }'); //结束移动屏幕一半

        // 重新指定动画名字使之生效
        document.querySelector(selector).style.webkitAnimationName = animName;
    }` 

---

看了一篇国外的文章 用appendRule可以添加动画效果
`keyframes.deleteRule('0%');

        keyframes.deleteRule('100%');
        keyframes.appendRule('0% { -webkit-transform: translateX(0); }'); //结束移动屏幕一半
        keyframes.appendRule('100% { -webkit-transform: translateX(100%); }'); //结束移动屏幕一半`
        

但是新的问题来了,虽然keyframes改了,但是动画效果并没有生效....这是为什么,怎么解

---

又研究了一下,打印CSSStyleSheet,发现有两个动画效果,只改了其中一个,全改以后终于可以了....

Answer 1

怎么全改呀