javascript动态改变css3的animation

当元素含有animation属性，并且现需要动态计算keyframe变化的值

动态改变keyframe

通过JavaScript动态改变animation的keyframe比较麻烦，造成此问题的原因也是受限于CSSOM的API，特别是定义了多个帧的frame时，js基本无法去在运行时动态改变,只能通过重写styleSheets中的cssRule来实现

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;
              }
          }
      }
  }
//删除旧的动画添加新的
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;
}
复制代码

此段代码对于未跨域link引入的css是可以生效,但是对于跨域的css在chrome下findKeyframesRule会取不到cssRule

设置cssRule

• addRule(selector, rules, [index]) IE
• deleteRule(index) FireFox
• insertRule(rule, index) FireFox
• removeRule([index]) IE