带有CSS变量和@keyframes的CSS动画在Safari上不更新

我正在用CSS变量制作一个动画，其中CSS变量值根据页面滚动而变化。然后，该变量将用于具有关键帧的动画

最初它只在Firefox上正确更新。与此同时，我找到了一种方法，通过强制重新绘制，使颜色从#000到#001

/*--比例由JS动态更改*/
@关键帧移动{
0% {
变换：translateX（0）标度（var（--scale））；
颜色：#000；
}
100% {
变换：translateX（33vw）标度（1.5）；
颜色：#001；
}
}

---

您可以看到，

我也遇到了这个问题，在调用

setProperty（）

后，通过在JavaScript中设置

元素.style.animation

属性解决了这个问题。在CSS中设置了

动画之后，似乎
@关键帧
没有更新。
这个问题有任何更新吗？@DimitarSpassov，我的解决方法是创建两个动画：原始动画是一个
移动
，我使用
左
，而不是
平移
，强制重新绘制。然后用JS检测浏览器。如果是FF，请使用
移动
，否则请使用
移动
。也许我做错了什么，但在Safari上，问题仍然存在，即使我将
translateX
转换替换为
左
。哦，对不起，@DimitarSpassov，忘了提及，我在回退版本中没有使用变量。在我的例子中，我使用了硬编码的值（%），并做了一些其他的变通方法。总结：我没有找到一种方法使它与CSS变量一起工作。哦，好吧。谢谢你的更新。