js 动态改变 animation 的 keyframe

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 && (rule.type== CSSRule.KEYframeS_RULE || ss[i].cssRules[j].type == CSSRule.WEBKIT_KEYframeS_RULE )){
    return rule; // 可改为 console 查看当前页中所有动画属性值
}
   }

      }

  }
  //删除旧的动画添加新的
  function change(selector,animName)
    {

 var keyframes = findKeyframesRule(animName);

 // 删除已经存在的开始和结束帧
 keyframes.deleteRule("0%");
 keyframes.deleteRule("100%");
 var clientWidth =  document.documentElement.clientWidth/2 || document.body.clientWidth/2 //此处为举例

 keyframes.insertRule("0% { -webkit-transform: translate("+clientWidth+"px); }");
 keyframes.insertRule("100% { -webkit-transform: translate(-"+clientWidth/2+"px); }");//结束移动屏幕一半

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

function findAndChangeKeyframesRule(objRule) {
 let rule,
 ss = document.styleSheets,
 cssStyleSheetIndexAni = 0,
 cssStyleRuleIndex = 0,
 cssKeyframesRule = 0,
 cssStyleSheetIndexSel = 0;

 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.selectorText == objRule.selectorName){
      cssStyleSheetIndexSel = i;
      cssStyleRuleIndex = x;
  }
  if (rule.name == objRule.animName && (rule.type== CSSRule.KEYframeS_RULE || ss[i].cssRules[j].type == CSSRule.WEBKIT_KEYframeS_RULE )){
      cssStyleSheetIndexAni = i;
      cssKeyframesRule = x;
  }
     }
 }

 document.styleSheets[cssStyleSheetIndexSel].deleteRule(cssStyleRuleIndex);
 document.styleSheets[cssStyleSheetIndexAni].deleteRule(cssKeyframesRule);
 document.styleSheets[cssStyleSheetIndexSel].insertRule(objRule.animation, cssStyleRuleIndex);
 document.styleSheets[cssStyleSheetIndexAni].insertRule(objRule.aniKeyframes, cssKeyframesRule);
    };

1. 在vue 中使用时，需注意 style 的 scope 属性，会自动添加 data-value的随机码，所以当用 animation-name 查询时，会查找不到当前值
   2.原文链接 参考文章来源