Javascript 同步CSS动画

是否有可能同步CSS动画？例如：

我有一个动画：

@keyframes AnimatedGradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

我将它与这个类一起应用于我想要的任何元素：

.animated-gradient {
    background: linear-gradient(270deg, #FC5C7D, #6A82FB, #EB3349, #F45C43, #FF8008, #FFC837, #4CB8C4, #3CD3AD, #24C6DC, #514A9D, #FF512F, #DD2476, #DA22FF, #9733EE, #22c1c3, #fdbb2d);
    background-size: 3200% 3200%;
    animation: AnimatedGradient 160s linear infinite;
}

---

如果我将其应用于2个或多个元素，例如，第一个是背景（body tag），另一个是悬停按钮，因此当我将鼠标悬停在其上时，动画将从一开始就开始，但我希望它与背景同步。那我该怎么做呢？最好使用纯JavaScript。谢谢

也许你可以在悬停时使按钮的背景透明。 下面的代码片段可能会有所帮助。在代码片段中，我给按钮加了一个粗边框，使按钮在悬停时可见，但您可以使用不同的技术（如在div之间剪切或堆叠按钮），这是适合您的代码的

@关键帧动画边缘{
0% {
背景位置：0%50%
}
50% {
背景职位：100%50%
}
100% {
背景位置：0%50%
}
}
.动画渐变{
背景：线性梯度（270度、FC5C7D、6A82FB、EB3349、F45C43、FF8008、FFC837、4CB8C4、3CD3AD、24C6DC、514A9D、FF512F、DD2476、DA22FF、9733EE、22C3、2D）；
背景大小：3200%3200%；
动画：AnimatedGraient 160s线性无限；
}
身体{
文本对齐：居中；
保证金：0；
填充：0；
}
.btn{
背景色：#000；
颜色：#fff；
填充：10px；
过渡时间：0.4s；
过渡时间功能：轻松；
边框顶部：实心25px#fff；
边框底部：实心25px#fff；
左边框：实心150px#fff；
右边框：实心150px#fff；
边缘顶部：50px；
}
.btn:悬停{
背景色：透明；
颜色：#fff；
过渡时间：0.4s；
过渡时间功能：轻松；
}

让我停下来！