时间戳

首页 > 解决方案 > 带有 CSS 变量和 @keyframes 的 CSS 动画未在 Safari 上更新

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

问题描述

我正在使用 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看到一个演示

标签： cssanimationsafarirepaint

解决方案

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

推荐阅读