Javascript 铬不’；t处理线性渐变的属性偏移的动画

下面是在

Firefox

中非常有效的代码，但是在

Chrome

中设置线性渐变偏移属性动画的任何尝试都没有结果

---

解决方案之一是使用浮点数代替百分比，即

values=“1；0；1”

代替

values=“100%；0%；100%”

svg{border:1px solid}

---

您可以始终使用

javascript

进行以下操作：

requestAnimationFrame（animateoffset）；
//如果此函数作为requestAnimationFrame的回调调用，
//所以有第一个参数是从场景开始的时间
函数animateoffset（t）{
requestAnimationFrame（AnimateOffset）；
t=t%5000/5000；//将从0更改为1（5秒）
t=Math.sin（t*Math.PI*2）；//将从-1更改为1
setAttribute（'offset'，`${50+t*50}%`）；
}

---

这里有一个CSS的想法，你可以依靠两个渐变和一个平移/不透明度动画来近似它。我还考虑了一点模糊效果，以便在渐变之间有更好的过渡

.box{
边界半径：20px；
宽度：200px；
高度：200px；
位置：相对位置；
z指数：0；
溢出：隐藏；
}
.box:之前，
.盒子：之后{
内容：“；
位置：绝对位置；
底部：0；
右：0；
宽度：220%；
身高：220%；
动画：平移2s无限线性交替；
}
.盒子：之后{
背景：
线性渐变（右下角，淡蓝色0%，白色40%，金色60%）；
动画名称：翻译、放映；
不透明度：0；
}
.盒子：以前{
背景：
线性渐变（右下角，淡蓝色，白色50%，金色50%）；
动画名称：平移、淡入淡出；
}
@关键帧平移{
从{
转换：翻译（48%，48%）；
}
}
@关键帧显示{
30%,85% {
不透明度：1；
}
}
@关键帧淡入淡出{
30%,85% {
过滤器：模糊（8px）；
}
}

---

渐变属性

偏移量

动画作为背景图像

将其报告给Chrome的bugtracker。是否对纯CSS动画感兴趣？@Temani Afif我期待从您那里解决CSS问题，但我对动画的精确属性

offset

很难完全相同，但我们可以这样近似：。。。我很确定我们可以做得更好，但它需要更精确的值。@Temani Afif请在这里发布您的CSS解决方案。一个有趣的解决方案，谢谢！令人惊讶的是，

values=“1；.5；1”

在

gradientUnits=“userSpaceOnUse”

我喜欢使用

Math.sin（）

这一事实。它使动画更平滑。@enxaneta我也喜欢使用像这里这样的缓和功能