如何使用javascript更改Keyframes背景颜色？

Question

嗨，我使用css3动画加载器，我想让它颜色无关。我的关键帧CSS3代码是

#floatingCircle{ 
    position:relative; 
    width:60px; 
    height:60px; 
    -moz-transform:scale(0.6); 
    -webkit-transform:scale(0.6); 
    -ms-transform:scale(0.6); 
    -o-transform:scale(0.6); 
    transform:scale(0.6); 
} 

.f_circle{ 
    position:absolute; 
    background-color:#FFFFFF; 
    height:11px; 
    width:11px; 
    -moz-border-radius:5px; 
    -moz-animation-name:f_fadeG; 
    -moz-animation-duration:1.04s; 
    -moz-animation-iteration-count:infinite; 
    -moz-animation-direction:linear; 
    -webkit-border-radius:5px; 
    -webkit-animation-name:f_fadeG; 
    -webkit-animation-duration:1.04s; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-direction:linear; 
    -ms-border-radius:5px; 
    -ms-animation-name:f_fadeG; 
    -ms-animation-duration:1.04s; 
    -ms-animation-iteration-count:infinite; 
    -ms-animation-direction:linear; 
    -o-border-radius:5px; 
    -o-animation-name:f_fadeG; 
    -o-animation-duration:1.04s; 
    -o-animation-iteration-count:infinite; 
    -o-animation-direction:linear; 
    border-radius:5px; 
    animation-name:f_fadeG; 
    animation-duration:1.04s; 
    animation-iteration-count:infinite; 
    animation-direction:linear; 
} 
#frotateG_01{ 
    left:0; 
    top:25px; 
    -moz-animation-delay:0.39s; 
    -webkit-animation-delay:0.39s; 
    -ms-animation-delay:0.39s; 
    -o-animation-delay:0.39s; 
    animation-delay:0.39s; 
} 

#frotateG_02{ 
    left:7px; 
    top:7px; 
    -moz-animation-delay:0.52s; 
    -webkit-animation-delay:0.52s; 
    -ms-animation-delay:0.52s; 
    -o-animation-delay:0.52s; 
    animation-delay:0.52s; 
} 

#frotateG_03{ 
    left:25px; 
    top:0; 
    -moz-animation-delay:0.65s; 
    -webkit-animation-delay:0.65s; 
    -ms-animation-delay:0.65s; 
    -o-animation-delay:0.65s; 
    animation-delay:0.65s; 
} 

#frotateG_04{ 
    right:7px; 
    top:7px; 
    -moz-animation-delay:0.78s; 
    -webkit-animation-delay:0.78s; 
    -ms-animation-delay:0.78s; 
    -o-animation-delay:0.78s; 
    animation-delay:0.78s; 
} 

#frotateG_05{ 
    right:0; 
    top:25px; 
    -moz-animation-delay:0.91s; 
    -webkit-animation-delay:0.91s; 
    -ms-animation-delay:0.91s; 
    -o-animation-delay:0.91s; 
    animation-delay:0.91s; 
} 

#frotateG_06{ 
    right:7px; 
    bottom:7px; 
    -moz-animation-delay:1.04s; 
    -webkit-animation-delay:1.04s; 
    -ms-animation-delay:1.04s; 
    -o-animation-delay:1.04s; 
    animation-delay:1.04s; 
} 

#frotateG_07{ 
    left:25px; 
    bottom:0; 
    -moz-animation-delay:1.17s; 
    -webkit-animation-delay:1.17s; 
    -ms-animation-delay:1.17s; 
    -o-animation-delay:1.17s; 
    animation-delay:1.17s; 
} 

#frotateG_08{ 
    left:7px; 
    bottom:7px; 
    -moz-animation-delay:1.3s; 
    -webkit-animation-delay:1.3s; 
    -ms-animation-delay:1.3s; 
    -o-animation-delay:1.3s; 
    animation-delay:1.3s; 
} 

@-moz-keyframes f_fadeG{ 
    0%{ 
     background-color:#000000} 

    100%{ 
     background-color:#FFFFFF} 

} 

请帮助我使用javascript改变关键帧100％部分的背景颜色。
在此先感谢！

Answer 1

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

注意：目前设置的方式只适用于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"); 

我相信你是想改变动画，让每个frotateG有它自己的颜色，但这种方法会改变颜色每个使用的动画背景颜色都是相同的。让每个都有自己的动画颜色的最简单方法是不使用js，而是为每个类型的对象创建一个单独的CSS动画。然后，你可以使用类似我提供的功能来改变点击动画的颜色，或者使用数组和某些递归，如果你想

有关这个主题的更多信息，你可以看看我的CSS技巧文章关于JavaScript与CSS动画和转换的交互found here