Firefox中的CSS动画... clip-path：inset（）

Question

我有一个在Chrome中运行良好的动画，但在Firefox中根本没有注册。这是一个模仿旧电视如何打开的动画。从“盒子”的中间开始。扩散到一条水平线，然后最后同时向上和向下扩散以填充“框”。 以下是我的CSS。

@keyframes tvOn{
0%{
clip-path: inset(49.9% 49%);
}
45%{
clip-path: inset(49.9% 0%);
}
100%{
clip-path: inset(0% 0%);
}
}


#box{
...
animation: 1s ease tvOn;
...
}

是否有不支持的内容？我甚至尝试过长方形＆＃39;和＆＃39; polygon＆＃39;但似乎都不起作用。如果你知道可以解决这个问题的Firefox polyfill，或者我喜欢它。这个剪辑路径插图工作得很漂亮，我不能轻易地用我尝试过的任何其他css属性获得相同的结果。甚至设置宽度和高度的动画也很棘手，因为它们从左上角开始生长，而不是“框”的直接中心/中间。 另外，我不想为增大尺寸的盒子制作动画，更多的是以一种独特的方式在两个轴上缓慢地显示一个完全隐藏的盒子，使它看起来像电视开启。