CODEWITHSUNDEEP
javascriptcsshtmlcss-animationskeyframe
dan-lee
dan-lee

Reputation: 14492

A way to read out or change CSS animation keyframes

In JavaScript it's easy to get the name and properties of CSS animations applied to an element:

var animName = element.style.webkitAnimationName;
// element.style.mozAnimationName
// etc...

But is there a way to read out or even change the CSS keyframes for animations?

Upvotes: 5

Views: 228

Answers (1)

dan-lee
dan-lee

Reputation: 14492

Thanks to the comments I was able to get to this solution:

var allStyles = document.styleSheets;
var keyframeType = window.CSSRule.WEBKIT_KEYFRAMES_RULE || window.CSSRule.KEYFRAMES_RULE;

for (var declaration in allStyles) {
  if (allStyles.hasOwnProperty(declaration)) {
    var ruleSet = allStyles[declaration].cssRules;

    for (var rule in ruleSet) {
      if (ruleSet.hasOwnProperty(rule)) {
        var currentRule = ruleSet[rule];

        if (currentRule.type == keyframeType) {
          console.log(currentRule);
        }
      }
    }
  }
}

Upvotes: 1

Related Questions