Html 为什么这个SVG掩码动画在Firefox中是断断续续的，而在Chrome中是平滑的？

我将正在制作的一个SVG动画（看起来应该像是一个装满了的容器）简化为下面的示例，该示例在Chrome中运行平稳，但在Firefox中则是断断续续的。它是一个有三层的SVG：第一层是一个

，最后一层是一个红色的圆圈。SVG的中间层是一个灰色圆圈。因此，红色圆圈位于灰色圆圈的顶部，通过CSS设置动画的遮罩可见：

#彩色遮罩{
填充物：白色；
}
#彩色掩模路径{
动画：波浪.75s无限线性；
}
@为波浪设置关键帧{
从{
转化：translateX（17rem）；
}
到{
transform:translateX（-17rem）；
}
}
#彩色掩模{
动画：提升6秒无限轻松进出；
动画方向：交替；
}
@关键帧升高{
从{
转化：translateY（11rem）；
}
到{
transform:translateY（-18rem）；
}
}

---

在没有问题的地方使用CSS掩码是一个不同的想法。我使用了你提供的路径作为掩码。只需确保为viewBox设置正确的值

.box{
显示：内联flex；
宽度：300px；
背景：rgb（180,180,180）；
边界半径：50%；
位置：相对位置；
溢出：隐藏；
}
.盒子：之后{
内容：“；
填充顶部：100%；
}
.盒子：以前{
内容：“；
位置：绝对位置；
左：0%；
宽度：200%；
身高：30%；
底部-10%；
背景：rgb（196,3,3）；
-webkit掩码：url（'data:image/svg+xml；utf8'）top/100%自动；
掩码：url（'data:image/svg+xml；utf8'，）top/100%自动；
动画：提升6秒无限轻松进退交替，波浪。75秒无限线性；
}
@为波浪设置关键帧{
到{
转化：translateX（-50%）；
}
}
@关键帧升高{
到{
身高：160%；
}
}

---

以下是SVG解决方案。只需调整第一个动画的值即可获得完美的重复：

---

我花了比我希望的更多的时间来研究这个问题，我以前的问题不可能通过重新思考动画本身来轻松解决。事实证明，罪魁祸首是firefox将限制屏幕外元素的动画，包括遮罩和剪贴画。不幸的是，您无法单独定位clippath或其中的元素，因此我找到的最佳解决方案是将svg拆分为

两个：一个用于clipPath，您使用

position:fixed

定位，以便它始终在屏幕上（不渲染），另一个用于引用clipPath的实际内容

不幸的是，您还必须考虑由动画转换的SVG的来源，如果动画将在屏幕外转换它，那么您将再次遇到问题。在您的特定示例中，如果将SVG从页面顶部向下放置至少18rems，从左边缘向右放置至少17rem，则只要页面的左上角可见，动画就会平稳播放

该测试用例演示了当有效的左上遮罩元素坐标穿过实际页面视口边界时，Firefox中的动画遮罩（显然）会结巴。（在“整页”或更高版本中查看，如从）：

SVG掩码动画跨视口边界Firefox stutter测试
html{背景：浅灰色；颜色：雪；高度：1000px；宽度：1000px；}
/*
https://stackoverflow.com/questions/62578638/why-is-this-svg-mask-animation-choppy-in-firefox-but-smooth-in-chrome
*/
.提高{
动画：提高3s无限轻松进退交替；
}
@关键帧升高{
从{
转化：translateY（50%）；
}
到{
转化：translateY（-50%）；
}
}
svg{border:2px固体石灰；}
.fx中的口吃{边框颜色：红色；}
文本{fill:#000；笔划：#fff；笔划宽度：.5；}
↓
↓


↓


↓

接受不同的想法，或者你想知道问题发生的原因？@TemaniAfif两者都可以；）我只能给一个；）另一方面，我会说这是一个bug，或者可能Firefox没有在Maski上完全实现转换。如果你想在Firefox中设置面具动画，最好使用SVG转换，并在SMIL中设置面具动画。通过@Kwantuum answer的观察提交。做得很好。我可能最终会使用它，因为它基本上解决了这个问题。真希望我知道为什么FF会被我拥有的东西噎住。@j08691等等，Robert，他是这个领域的专家，他肯定会告诉你为什么Firefox中的masks中的ycss转换支持是最近才出现的，我想我们在这方面还存在一些问题。