Син c из CSS Радужная анимация

Question

Я сейчас работаю над темой YT Rainbow. Моя проблема в том, что у меня есть более одного элемента с анимацией радуги и, к сожалению, там нет синхронизации c. Например, анимация YT Icon запускается сразу после загрузки сайта, а анимация кнопки «Мне нравится / не нравится» запускается при нажатии одной из кнопок. У меня вопрос, есть ли способ синхронизировать c эти две анимации.

Я думал, что «currentcolor» может быть решением этой проблемы, но я не знаю, где разместить анимацию, когда бы Я определяю цвет с помощью currentcolor, чтобы элемент получал анимацию радуги.

Srry за мой плохой Engli sh, я из Германии:)

Вот как выглядит мой код:

/*rainbow colors theme fill*/
@keyframes RainbowThemeF { 
    0% { fill: #ff0000 }
    5% { fill: #ff0074 }    
    10% { fill: #ff00b4 }
    15% { fill: #f000ff }
    20% { fill: #a300ff }
    25% { fill: #5600ff }
    30% { fill: #1500ff }
    35% { fill: #0051ff }
    40% { fill: #00abff }
    45% { fill: #00fff9 }
    50% { fill: #00ffb8 }
    55% { fill: #00ff78 }
    60% { fill: #00ff2b }
    65% { fill: #22ff00 }
    70% { fill: #6fff00 }
    75% { fill: #b0ff00 }
    80% { fill: #f0ff00 }
    85% { fill: #ffb400 }
    90% { fill: #ff7400 }
    95% { fill: #ff3300 }
    100% { fill: #ff0000 }
}
/*rainbow colors theme color*/
@keyframes RainbowThemeC { 
    0% { color: #ff0000 }
    5% { color: #ff0074 }    
    10% { color: #ff00b4 }
    15% { color: #f000ff }
    20% { color: #a300ff }
    25% { color: #5600ff }
    30% { color: #1500ff }
    35% { color: #0051ff }
    40% { color: #00abff }
    45% { color: #00fff9 }
    50% { color: #00ffb8 }
    55% { color: #00ff78 }
    60% { color: #00ff2b }
    65% { color: #22ff00 }
    70% { color: #6fff00 }
    75% { color: #b0ff00 }
    80% { color: #f0ff00 }
    85% { color: #ffb400 }
    90% { color: #ff7400 }
    95% { color: #ff3300 }
    100% { color: #ff0000 }
}
/*rainbow colors theme background color*/
@keyframes RainbowThemeBC { 
    0% { background-color: #ff0000 }
    5% { background-color: #ff0074 }    
    10% { background-color: #ff00b4 }
    15% { background-color: #f000ff }
    20% { background-color: #a300ff }
    25% { background-color: #5600ff }
    30% { background-color: #1500ff }
    35% { background-color: #0051ff }
    40% { background-color: #00abff }
    45% { background-color: #00fff9 }
    50% { background-color: #00ffb8 }
    55% { background-color: #00ff78 }
    60% { background-color: #00ff2b }
    65% { background-color: #22ff00 }
    70% { background-color: #6fff00 }
    75% { background-color: #b0ff00 }
    80% { background-color: #f0ff00 }
    85% { background-color: #ffb400 }
    90% { background-color: #ff7400 }
    95% { background-color: #ff3300 }
    100% { background-color: #ff0000 }
}
/*yt icon rainbow animation*/
#heart-button button yt-icon,
path[fill="#FF0000"] {
    animation: RainbowThemeF 35s linear infinite;
}
/*like bar rainbow animation*/
ytd-sentiment-bar-renderer[activated_] #like-bar.ytd-sentiment-bar-renderer {
    animation: RainbowThemeBC 35s linear infinite !important;
}
/*like / dislike button rainbow animation*/
ytd-toggle-button-renderer.style-default-active[is-icon-button] {
    animation: RainbowThemeC 35s linear infinite !important;
}

Answer 1

Используйте сценарии для применения класса анимации к вашим элементам, которые вы хотели анимировать после загрузки страницы. Используйте что-то вроде этого:

document.addEventListener("DOMContentLoaded", function(){
    //Code to apply classes to desired elements
});