带有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;
    }
}
您可以看到a demo at codepen

我正在使用CSS变量制作动画，其中CSS变量值根据页面滚动而变化。然后将该变量用于具有关键帧的动画。最初它仅在Firefox上工作。...

Answer 1

对于野生动物园，您必须使用@-webkit-keyframes。因此，在您的代码中，您将不得不添加其他内容：