形状动画在Firefox中不起作用，但在Chrome中起作用

Question

我正在尝试从一种形状到另一种形状的动画。这适用于Chrome，但不适用于最新的Firefox或IE。在以下链接上将鼠标悬停在黄色框上以查看动画：jsfiddle

.element {   
    background-color: #f1c40f; 
    color: white;
    width: 500px; 
    height: 500px;
    margin: 30px auto;
    text-align: justify;
    shape-inside: polygon(250px 0, 350px 170px, 500px 180px, 380px 320px, 450px 500px, 250px 420px, 50px 500px, 120px 320px, 0px 180px, 150px 170px );
    shape-padding: 10px;
    transition: all 3s ease; 
    -webkit-clip-path: polygon(250px 0, 350px 170px, 500px 180px, 380px 320px, 450px     500px, 250px 420px, 50px 500px, 120px 320px, 0px 180px, 150px 170px );
} 
.element:hover{ 
    shape-inside: polygon(250px 0, 500px 0, 500px 180px, 500px 320px, 500px 500px, 250px 500px, 0 500px, 0 320px, 0 180px, 0 0);
    -webkit-clip-path: polygon(250px 0, 500px 0, 500px 180px, 500px 320px, 500px 500px,     250px 500px, 0 500px, 0 320px, 0 180px, 0 0);
} 

有关如何使用这种跨浏览器的建议？

谢谢。