html - 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

我已经更新了 fiddle 。看看<强>HERE

在 mozilla 上，您似乎需要为 stroke-dashoffset 设置开始和结束...

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