如何在Javascript中更改关键帧状态

How can I change keyframe state in Javascript

本文关键字：关键帧 状态 Javascript      更新时间：2023-09-26

我想用JQuery动态更改关键帧状态
这是我的关键帧：

@keyframes moveItUp {
    10% {
        top: 18%;
    }
    20% {
        top: 16%;
    }
    30% {
        top: 14%;
    }
    40% {
        top: 12%;
    }
    50% {
        top: 10%;
    }
    60% {
        top: 8%;
    }
    70% {
        top: 6%;
    }
    80% {
        top: 4%;
    }
    90% {
        top: 2%;
    }
    100% {
        top: -20px;
    }
}

例如，我想从20%切换到40%等等。。使用Javascript 动态

我该怎么做？感谢

MSDN上有一篇很棒的博客文章，详细解释了如何做到这一点。

  var rule;    
  var ss = document.styleSheets;
  for (var i = 0; i < ss.length; ++i) {
      // loop through all the rules!
      for (var x = 0; x < ss[i].cssRules.length; ++x) {
          rule = ss[i].cssRules[x];
          if (rule.name == "moveItUp" && rule.type == CSSRule.KEYFRAMES_RULE) {
              // do what you need to do here
          }
      }
  }
相关文章：