A way to read out or change CSS animation keyframes

Question

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?

this maybe work. http://stackoverflow.com/questions/2495829/dynamically-modify-webkit-animation-with-javascript — Anirudha Gupta, Dec 06 '13 at 08:35
@KingAnirudhaIII Thanks, the answer from RussellUresti looks interesting. — dan-lee, Dec 06 '13 at 08:47
I found this which must help you. http://stackoverflow.com/questions/10342494/set-webkit-keyframes-values-using-javascript-variable — Bhojendra Rauniyar, Dec 06 '13 at 08:50

score 1 · Answer 1 · answered Dec 06 '13 at 11:23

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);
        }
      }
    }
  }
}

A way to read out or change CSS animation keyframes

1 Answers1