如何使用javascript更改关键帧背景颜色？

嗨，我正在使用css3动画加载程序，我想使其颜色独立。我的关键帧CSS3代码是

#浮动圆{
位置：相对位置；
宽度：60px；
高度：60px；
-moz变换：比例（0.6）；
-webkit变换：比例（0.6）；
-ms变换：标度（0.6）；
-o变换：标度（0.6）；
变换：比例（0.6）；
}
f_圈{
位置：绝对位置；
背景色：#FFFFFF；
高度：11px；
宽度：11px；
-moz边界半径：5px；
-moz动画名称：f_fadeG；
-moz动画持续时间：1.04s；
-moz动画迭代次数：无限；
-moz动画方向：线性；
-webkit边界半径：5px；
-webkit动画名称：f_fadeG；
-webkit动画持续时间：1.04秒；
-webkit动画迭代计数：无限；
-webkit动画方向：线性；
-ms边界半径：5px；
-ms动画名称：f_fadeG；
-ms动画持续时间：1.04s；
-ms动画迭代次数：无限；
-ms动画方向：线性；
-o-边界半径：5px；
-o-animation-name:f_fadeG；
-o-动画持续时间：1.04s；
-o-动画-迭代-计数：无限；
-o方向：线性；
边界半径：5px；
动画名称：f_fadeG；
动画持续时间：1.04秒；
动画迭代次数：无限；
动画方向：线性；
}
#frotateG_01{
左：0；
顶部：25px；
-moz动画延迟：0.39s；
-webkit动画延迟：0.39s；
-ms动画延迟：0.39s；
-o-动画延迟：0.39s；
动画延迟：0.39s；
}
#frotateG_02{
左：7px；
顶部：7px；
-moz动画延迟：0.52s；
-webkit动画延迟：0.52s；
-ms动画延迟：0.52s；
-o-动画延迟：0.52s；
动画延迟：0.52s；
}
#frotateG_03{
左：25px；
排名：0；
-moz动画延迟：0.65s；
-webkit动画延迟：0.65s；
-ms动画延迟：0.65s；
-o-动画延迟：0.65s；
动画延迟：0.65s；
}
#frotateG_04{
右：7px；
顶部：7px；
-moz动画延迟：0.78s；
-webkit动画延迟：0.78s；
-ms动画延迟：0.78s；
-o-动画延迟：0.78s；
动画延迟：0.78s；
}
#frotateG_05{
右：0；
顶部：25px；
-moz动画延迟：0.91s；
-webkit动画延迟：0.91s；
-ms动画延迟：0.91s；
-o-动画延迟：0.91s；
动画延迟：0.91s；
}
#frotateG_06{
右：7px；
底部：7px；
-moz动画延迟：1.04s；
-webkit动画延迟：1.04s；
-毫秒动画延迟：1.04s；
-o-动画延迟：1.04s；
动画延迟：1.04s；
}
#frotateG_07{
左：25px；
底部：0；
-moz动画延迟：1.17s；
-webkit动画延迟：1.17s；
-ms动画延迟：1.17s；
-o-动画延迟：1.17s；
动画延迟：1.17秒；
}
#frotateG_08{
左：7px；
底部：7px；
-moz动画延迟：1.3s；
-webkit动画延迟：1.3s；
-ms动画延迟：1.3s；
-o-动画延迟：1.3s；
动画延迟：1.3s；
}
@-moz关键帧f_fadeG{
0%{
背景色：#000000}
100%{
背景色：#FFFFFF}
}

请帮助我使用javascript 100%更改关键帧的背景色。

---

提前谢谢

这实际上是一个相当复杂的过程。首先需要在javascript中获取keyframes对象，然后必须创建一个新版本。下面是一个未经测试的版本，它可以工作（可能会有一些更改），但我认为它不会像您希望的那样工作

注意：按照目前的设置方式，它仅适用于webkit，如果要为所有浏览器提供服务，则需要添加更多浏览器前缀

// Function to get the keyframe object based on the name
function findKeyframesRule(rule) {
    var ss = document.styleSheets;
    for (var i = 0; i < ss.length; ++i) {
        for (var j = 0; j < ss[i].cssRules.length; ++j) {
            if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && 
                ss[i].cssRules[j].name == rule) { return ss[i].cssRules[j]; }
        }
    }
    return null;
}

// Function to change the last keyframe of the given animation to the new color
function changeAnimColor(animationName, color) {
    var keyframes = findKeyframesRule(animationName);
    keyframes.deleteRule('100'); 
    keyframes.insertRule("100% { background-color:" + color + "; }");
}

changeAnimColor("f_fadeG", "#FF00FF");

//根据名称获取关键帧对象的函数
函数findKeyframesRule（规则）{
var ss=document.styleSheets；
对于（变量i=0；i

我相信您希望更改动画，使每个

frotateG

都有自己的颜色，但这种方法会更改每个动画使用的背景色的颜色，以便它们都相同。使每个对象具有自己的动画颜色的最简单方法是不使用js，而是为该类型的每个对象创建一个单独的CSS动画。然后，您可以使用我提供的函数来更改单击时的动画颜色，或者如果您愿意，可以使用数组和一些递归

有关此主题的更多信息，请参阅我关于CSS技巧的文章，其中介绍了Javascript与CSS动画和转换的交互