问题：
使用js方法添加css样式，setAttribute（属性，属性值）；但是今天这个添加的不是样式，而是设置动画的@keyframes，这个没有办法使用setAttribute，只能使用下面的方法进行添加：
然后就报了上面的错误，就是因为，样式当时的长度打印是3，添加到9的位置报错了；
修改：
这样修改的话是添加为0 的位置上了，（行内样式会根据页面的展示添加，所以添加样式不要向后添加，可以默认添加到0 的位置）
下面直接上文档：
1. CSSStyleSheet.insertRule() 方法用来给当前样式表插入新的样式规则（CSS rule）
2. 尽管 insertRule() 是 CSSStyleSheet 的一个方法，但它实际插入的地方是 CSSStyleSheet.cssRules 的内部 CSSRuleList。
3. stylesheet.insertRule(rule [, index])
rule: 指的是规则（是字符串的）
index: 指的是插入样式的位置，不写默认插入第一个
4. 新插入的规则在当前样式表规则列表中的索引。
5. 限制报错信息
- 如果
index>CSSRuleList.length，该方法会中止并返回一个IndexSizeError错误； - 如果
rule由于一些 CSS 约束而不能被插入到index0，该方法会中止并返回一个HierarchyRequestError错误； - 如果
rule参数中包含超过一条样式规则，该方法会中止并返回一个SyntaxError； - 如果尝试在一条普通规则后插入一条
@import这种类型的规则，该方法会中止并返回一个HierarchyRequestError错误； - 如果
rule是@namespace并且规则列表中有另外的@import和/或@namespace规则，该方法中止并返回一个InvalidStateError错误；
后续来了：
经过几天的测试我又被产品抓住了：
在本地测试是没有问题的但是上预发之后报了这个每一个错：
这是为什么呢？
因为项目打包之后css样式进行打包了（变成cdn的链接了），获取样式列表的时候获取不到，样式指向的源不一样了，导致页面获取不到样式列表也就无法添加了；（获取样式列表document.stylesSheets[0]这个指的是行内的样式）
解决办法：
