具有 CSS 变量和 @keyframes 的 CSS 动画未在 Safari 上更新答案

【问题标题】：CSS animation with CSS variables and @keyframes not updating on Safari具有 CSS 变量和 @keyframes 的 CSS 动画未在 Safari 上更新
【发布时间】：2020-03-21 21:48:23
【问题描述】：

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

最初它只在 Firefox 上正确更新。同时，我找到了一种让它在 Chrome 上也能工作的方法，通过强制重新绘制，在这种情况下，将颜色从 #000 设置为 #001。

/* --scale is dynamic changed by JS */

@keyframes move {
    0% {
        transform: translateX(0) scale(var(--scale));
        color: #000;
    }
    100% {
        transform: translateX(33vw) scale(1.5);
        color: #001;
    }
}

你可以看到a demo at codepen

【问题讨论】：

关于这个问题的任何更新？
@DimitarSpassov，我的解决方法是创建 2 个动画：原来的一个是 moveExpensive，我使用 left 而不是 translateX，强制重绘。然后用JS检测浏览器。如果是 FF 使用move，否则使用moveExpensive。
也许我做错了什么，但在 Safari 上问题仍然存在，即使我将 translateX 转换替换为 left。
哦，对不起，@DimitarSpassov，忘了说，我没有在回退版本中使用变量。就我而言，我使用了硬编码值 (%) 并做了一些其他的变通方法。总而言之：我没有找到使它与 CSS 变量一起工作的方法。
哦，好吧。感谢您的更新。

标签： css animation safari repaint

【解决方案1】：

我也遇到了这个问题，并通过在调用setProperty() 后在 JavaScript 中设置element.style.animation 属性来解决它。在 CSS 中设置 animation 后，@keyframes 似乎没有更新。

【讨论】：