查找特定的 CSS @keyframes 规则答案

【问题标题】：Find specific CSS @keyframes rule查找特定的 CSS @keyframes 规则
【发布时间】：2015-07-28 13:53:34
【问题描述】：

我想使用 JavaScript 在我的 CSS 中调整特定的 @keyframes-rule。这一切都适用于以下代码：

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
// ...

从 Chrome 43 开始，浏览器支持无前缀 CSS 动画属性。但是我的代码仍然返回前缀关键帧规则@-webkit-keyframes changecolor，因为它也适用于条件if ((rule.type === window.CSSRule.KEYFRAMES_RULE || rule.type === window.CSSRule.WEBKIT_KEYFRAMES_RULE) && rule.name === ruleName) {。

选择浏览器实际使用的关键帧规则有什么更好的方法？

这里是完整的例子：http://jsfiddle.net/tschortsch/zbma3bcp/2/

【问题讨论】：

标签： javascript css css-animations

【解决方案1】：

使用的keyframes 规则是最后定义的。因此，您可以从结尾循环，而不是从开头循环：

for (x = ss[i].cssRules.length - 1; x >= 0; 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;
    }
}

见fiddle。

【讨论】：