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

これを試して。

@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 に答える