Select CSS Keyframes

by tschortsch

CSS

@-webkit-keyframes changecolor {
    0% { color: red; }
    100% { color: green; }
}
@keyframes changecolor {
    0% { color: red; }
    100% { color: green; }
}

JavaScript

function getKeyframeRule(ruleName) {
    var ss = document.styleSheets,
        rule, i, x;
    
    for (i = 0; i < ss.length; ++i) {
        if (ss[i].cssRules) {
            // loop through all the rules
            for (x = 0; x < ss[i].cssRules.length; ++x) {
                rule = ss[i].cssRules[x];
                if ((rule.type === window.CSSRule.KEYFRAMES_RULE || rule.type === window.CSSRule.WEBKIT_KEYFRAMES_RULE) && rule.name === ruleName) {
                    return rule;
                }
            }
        }
    }
    return null;
}

// find keyframes rule
var rule = getKeyframeRule("changecolor");
console.log(rule.cssText);

// adjust keyframes rule
// ...