CSS彩虹动画的同步

我目前正在做一个YT彩虹主题。我的问题是，我有一个以上的彩虹动画元素，不幸的是，有不同步。例如，加载站点后，YT图标动画立即开始，单击其中一个按钮时，喜欢/不喜欢按钮动画开始。 我的问题是，是否有办法同步这两个动画

我认为“currentcolor”可以解决这个问题，但我不知道在哪里放置动画，每当我用currentcolor定义颜色时，元素就会得到彩虹动画

因为我英语不好，我来自德国：）

这就是我的代码的样子：

/*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;
}

---

使用脚本将动画类应用于要在页面加载后设置动画的元素。使用类似以下内容：

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

---

我只能使用css，因为style中不支持javascript或html。如果新动画被激活，是否有办法重新启动所有动画？尝试将关键帧代码放在HTMLit底部的样式标记中仍然不同步：(