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

Question

我正在使用 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;
    }
}

您可以在 codepen 上查看演示

Answer 1

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