使用URL FireFox动画剪辑路径

Question

我正在使用SVG和clip-path，但由于SMIL已被弃用，我不得不求助于使用CSS绘制和动画我的形状。

我的目标是让一些三角形在彼此的顶部，在三角形的右边或左边的点处折叠，这取决于它指向的方式。

我通过执行以下操作在Chrome中找到了它：

.elementRight {
  margin-top: -140px;
  width: 100px;
  height: 200px;
  background: red;
  -webkit-clip-path: polygon(0% 20%, 100% 50%, 100% 50%, 0% 80%);
  transition: all .2s;
  position: relative;
}

.elementRight:hover {
  -webkit-clip-path: polygon(0% 20%, 100% 20% ,100% 80%, 0% 80%);
  z-index: 1000;
}

添加几行CSS和更多元素，结果如下： 它在GIF中不是很流畅，而是Fiddle can be found here。

当我尝试在Firefox中实现相同功能时，我不得不诉诸clip-path: url(#name);。我可以添加一个css :hover，因此它会更改从HTML中选择的剪辑路径，但它不会顺利过渡： 可以在this fiddle中找到此版本（仅在Firefox中有体验！）。

有没有人知道如何在Firefox中从三角形平滑过渡到正方形？用户的基本体验是相同的（悬停时，它变成了正方形），但我喜欢Chrome，Opera和Safari提供的平滑性。