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

Posted 2023-03-06

【中文标题】具有 CSS 变量和 @keyframes 的 CSS 动画未在 Safari 上更新

【英文标题】：CSS animation with CSS variables and @keyframes not updating on 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 变量一起工作的方法。

哦，好吧。感谢您的更新。

【参考方案1】：

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