js动态设置关键侦@keyframes

在JavaScript中，您可以使用document.styleSheets接口来动态地创建和设置@keyframes规则。以下是一个简单的例子：

// 获取页面的样式表
var styleSheet = document.styleSheets[0];
 
// 设置animation名称和持续时间
var animationName = 'exampleAnimation';
var duration = '2s';
 
// 创建animation的keyframes规则
var keyframesRule = `
  @keyframes ${animationName} {
    0% {
      background-color: red;
    }
    100% {
      background-color: yellow;
    }
  }
`;
 
// 如果是Firefox或者其他支持insertRule的浏览器
if (styleSheet.insertRule) {
  styleSheet.insertRule(keyframesRule, styleSheet.cssRules.length);
} else if (styleSheet.addRule) { // 兼容IE
  styleSheet.addRule(null, keyframesRule);
}
 
// 应用animation到一个元素上
var element = document.getElementById('myElement');
element.style.animation = `${animationName} ${duration} linear infinite`;

请注意，document.styleSheets的使用可能会受到跨域策略的限制，特别是在使用了内容安全策略(CSP)的情况下。此外，addRule方法是一个非标准方法，主要用于IE浏览器，现代浏览器推荐使用insertRule。