@keyframes动画中声明的关键帧块可以使用appendRule(n)或deleteRule(n)修改，其中n是关键帧的完整选择符。关键帧的内容可以通过findRule(n)获取。

1.上代码：

<!DOCTYPE html>

<head>
  <title>通过js脚本编辑@keyframes动画</title>
  <style>
    .qq {
      
      
      width: 200px;
      height: 200px;
      /* 指定动画名称 */
      animation-name: myAnimation;
      /* 定义动画的时长 */
      animation-duration: 5s;
    }

    @keyframes myAnimation {
      
      
      from {
      
      
        background-color: blue;
      }

      to {
      
      
        background-color: red;
      }
    }
  </style>
</head>

<body>
  <div class="qq"></div>

  <script type="text/javascript">
    let myRules = document.styleSheets[0].cssRules;
    let keyframesRule = myRules[1]; // a CSSKeyframesRule
    //获取指定的关键帧的选择符和内容
    let aRule = keyframesRule.findRule("from").cssText;
    console.log(aRule);//0% { background-color: blue; }
    //删除from关键帧
    keyframesRule.deleteRule("from");
    //在动画末尾添加50%关键帧
    keyframesRule.appendRule("50% {background-color: green}");
  </script>
</body>

</html>

2.代码讲解

首先通过let myRules = document.styleSheets[0].cssRules;来获得所有的css的所有内容。
在这里插入图片描述
在此例子中定义的动画在<style></style>中是第二个所以用let keyframesRule = myRules[1];来获得，@keyframes动画。

获得了定义的动画就好说了。keyframesRule.findRule(“from”).cssText;语句中，keyframesRule是定义的关键帧动画，返回的结果是匹配from的关键帧。语句返回0% { background-color: blue; } （from即是0%，to是100%）

keyframesRule.deleteRule(“from”);将删除最后一个from关键帧，如果有多个from关键帧，排在最后的那个将被删除。可以运行一下，这里删除了from关键帧，开始的时候背景颜色就不是蓝色了，而是默认的白色。

keyframesRule.appendRule(“50% {background-color: green}”);将在@keyframes块中最后一个关键帧后面追加50%关键帧。（@keyframes块中的关键帧无需按升序排序，一般情况下开发人员为了方便都会按顺序写，但其实不按顺序写也没有影响）。运行下就可以看到div是先由蓝色变到绿色最后变成了红色（注意：此例子的from被前一行代码移除，要看到先由蓝色变到绿色最后变成了红色的效果，需将keyframesRule.deleteRule(“from”);注释掉）

通过js脚本方法appendRule(n)、deleteRule(n)、findRule(n)编辑@keyframes动画

1.上代码：

2.代码讲解

猜你喜欢