1

我想创建一个适用于非 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/

再次感谢！

4

3 回答 3

1

我已经更新了小提琴。看看这里

看来，在Mozilla上，您需要为stroke-dashoffset设置一个开始和结束......

from {
   stroke-dashoffset : 100%;
}
to {
    stroke-dashoffset: 0%;
}
于 2013-08-01T06:02:19.577 回答
0

我认为对于 Firefox，您必须指定以下内容

@-moz-keyframes ANIMATION-NAME {

}
于 2013-08-01T05:49:48.060 回答
0

尝试这个。

@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;

}

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

于 2013-08-01T10:57:59.000 回答