CSS3动画无法在非webkit浏览器上运行

Question

我想创建一个适用于非webkit浏览器和webkit浏览器的CSS3动画。我包含了这两个CSS标签，但它拒绝在Firefox上工作。它在Chrome和Safari上运行良好。有什么想法吗？

HTML:

<svg>
    <g fill="none" stroke="black" stroke-width="6">
        <path stroke-dasharray="10,10" stroke="#000000" stroke-width="4" d="M108.634,309.137c0.19-29.637,0.772-122.891,0.677-140.006c-0.112-20.395,6.424-61.949,66.966-61.949c40.273,0,65.163-0.552,77.294,0c24.892,1.132,34.114-11.41,37.47-19.581"/>
    </g>
</svg>

CSS：

@keyframes antsAnimation {
    from {
        stroke-dashoffset: 100%; 
    }
}
@-webkit-keyframes antsAnimation  {
    from {
        stroke-dashoffset: 100%; 
    }
}
svg {
    animation: antsAnimation 15s linear infinite;
    animation-fill-mode: forwards;
    -webkit-animation: antsAnimation 15s linear infinite;
    -webkit-animation-fill-mode: forwards;
}

JSFiddle：http://jsfiddle.net/MpLwk/

再次感谢！

Answer 1

我已经更新了小提琴。查看此处

看起来，在mozilla上，你需要有一个笔划dashoffset的开始和结束。。。

from {
   stroke-dashoffset : 100%;
}
to {
    stroke-dashoffset: 0%;
}

Answer 2

我认为对于firefox，您必须指定以下

@-moz-keyframes ANIMATION-NAME {
} 

Answer 3

试试这个。

@keyframes antsAnimation {
    from {
        stroke-dashoffset: 100%; 
    }
}
@-webkit-keyframes antsAnimation  {
    from {
        stroke-dashoffset: 100%; 
    }
}
@-moz-keyframes antsAnimation  {
    from {
        stroke-dashoffset: 100%; 
    }
}
svg {
    animation: antsAnimation 15s linear infinite;
    animation-fill-mode: forwards;
    -webkit-animation: antsAnimation 15s linear infinite;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: antsAnimation 15s linear infinite;
    -moz-animation-fill-mode: forwards;
}

您需要调用供应商特定的标签