Как изменить цвет фона ключевых кадров с помощью javascript?

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} 

} 

Пожалуйста, помогите мне, чтобы изменить цвет фона ключевых кадров 100% часть с помощью JavaScript.
заранее!

Answer 1

Это на самом деле довольно сложный процесс. Сначала вам нужно получить объект keyframes в 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