js添加、删除@keyframes

@keyframes规则是用来定义css动画：

@keyframes name{
	0{
		/* 
		状态起始
		... ...
		left: 0;
		*/
	}
	50%{
		/* 
		状态起始
		... ...
		left: 50%;
		*/
	}
	100%{
		/* 
		状态起始
		... ...
		left: 100%;
		*/
	}
}

html标签添加动画：

div{
    animation: name;
}

但有时动画的效果是需要计算动态生成的，这时我们就需要JS进行动态生成@keyframes规则。

解决思路：

1、首先我们需要获取css的样式表

// 获取所有css样式表
let styles = document.styleSheets;

获取结果：

StyleSheetList {0: CSSStyleSheet, length: 1}

这其实是一个Object类型而不是Array类型。StyleSheetList对象中的CSSStyleSheet就是一张样式表（按style、link标签为单位生成?）。

2、根据这个StyleSheetList对象，筛选需要添加到的CSSStyleSheet中（这不主要是为了规范，其实放哪里都一样）

// 根据href
let style = null;
for(p in styles){
    if(styles[p].href.search(/xxx.css/)){//要匹配的css
        style = styles[p];
    }
}

3、通过CSSStyleSheet的insertRule(rule [, index])进行添加@keyframes

style.insertRule(`@keyframes name { 
					0 { left: 0px; }
					20% { left: 0px; }
					100% { left: 200px; } 
				}`, 0);

插入成功后长这样：

CSSKeyframesRule {name: "content", cssRules: CSSRuleList, type: 7, cssText: "@keyframes content { ↵ 0% { left: 1536px; }↵ 100% { left: -5100px; }↵}", parentRule: null, …}

insertRule在CSSStyleSheet中生成了一个CSSKeyframesRule

4、如果要删除css规则，则通过CSSStyleSheet的removeRule(index)即可。不过需要遍历一下CSSStyleSheet.name在查找需要删除rule的index

5、其实直接js动态生成一个style标签会比较简单，通用

用这个写了一个字幕轮播效果：https://shahow.top/blackboard/