将SVG SMIL属性动画转换为CSS

由于SVG SMIL动画正在被弃用,我正在尝试将一些形状变形动画转换为CSS3关键帧动画.大多数转换都是直接的,除了我正在使用path属性的转换d=.

例如,此SVG在3(实际为4,但开头/结尾相等)阶段之间变形:

我(相当乐观)的转换@keyframes看起来像

虽然这确实绘制了初始形状,但没有动画.提供线索的唯一浏览器是Firefox,它提到:Unknown property 'd'. Declaration dropped..这是有道理的,虽然我似乎无法弄清楚如何在不使用SMIL的情况下声明变形形状.

可以在Codepen上找到强制性演示

我想保持SVG独立,所以如果可以避免javascript则不是一个选项(因为我使用SVG作为背景图像).对于这个例子看起来很诱人,我也试图避免使用CSS transformsSVG我正在转换由各种形状变形组成.