我正在使用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变量值根据页面滚动而变化。然后将该变量用于具有关键帧的动画。最初它只能正确更新...
对于野生动物园,您必须使用@-webkit-keyframes
。因此,在您的代码中,您将不得不添加其他内容: