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

我已经更新了小提琴。看看 HERE

看来在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;

}

您需要调用供应商特定标记

CSS3动画不适用于非webkit浏览器

3 个答案: