SVG裁剪路径结合@keyframes动画无法生效问题求助

我已尝试数日，始终无法让以下代码正常运行：

CSS 代码 #

#menu {
  /*clip-path: url(#enter-clip-path-one);*/
  position: absolute;
  top: 0;
  left: 0;
  width:200px;
  height:200px;
  background-color:black;
  animation: Melt 5s infinite;
}

@-webkit-keyframes Melt {
    0% {
            clip-path: url(#enter-clip-path-one);
    }
    100% {
            clip-path: url(#enter-clip-path-two);
    }
}

HTML 代码 #

<svg class="svg-melt">
  <clipPath id="enter-clip-path-one" clipPathUnits="objectBoundingBox"><path d="M0,-0.003 C0.042,-0.242,0.083,-0.361,0.125,-0.361 C0.188,-0.361,0.18,0.004,0.25,-0.003 C0.32,-0.011,0.313,-0.987,0.375,-0.987 C0.438,-0.987,0.436,-0.127,0.5,-0.003 C0.564,0.12,0.564,-0.514,0.625,-0.523 C0.686,-0.533,0.689,0.044,0.752,-0.003 C0.816,-0.051,0.811,-0.719,0.873,-0.719 C0.914,-0.719,0.956,-0.481,1,-0.003 L1,-0.984 L0,-0.984 L0,-0.003"></path></clipPath>
</svg>

<svg class="svg-melt">
  <clipPath id="enter-clip-path-two" clipPathUnits="objectBoundingBox"><path d="M0,0.653 C0.042,0.885,0.083,1,0.125,1 C0.188,1,0.18,0.756,0.25,0.755 C0.32,0.754,0.313,0.929,0.375,0.929 C0.438,0.929,0.436,0.68,0.5,0.694 C0.564,0.708,0.564,0.983,0.625,0.982 C0.686,0.981,0.689,0.781,0.752,0.776 C0.816,0.77,0.811,0.96,0.873,0.96 C0.914,0.96,0.956,0.857,1,0.653 L1,0 L0,0 L0,0.653"></path></clipPath>
</svg>

<div id="menu"></div>

补充说明 #

• 裁剪路径初始代码来自CSS Tricks的clip-path动画教程
• 使用工具将SVG绝对裁剪路径转为相对路径
• 代码已上传到我的CodePen项目

现在的问题是：这段代码没有过渡动画效果，只会直接显示@keyframes关键帧对应的静态状态，请问这是为什么？

提前感谢！

内容的提问来源于stack exchange，提问作者George Fragkos