CSS3動畫不適用於非webkit瀏覽器

我想創建一個適用於非webkit瀏覽器和webkit瀏覽器的CSS3動畫。我包含了兩個CSS標籤，但它拒絕在Firefox上工作。它適用於Chrome和Safari。有任何想法嗎？CSS3動畫不適用於非webkit瀏覽器

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/

再次感謝！

來源

2013-08-01 joe smith

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

看來，你需要有一個開始和衝程dashoffset結束Mozilla瀏覽器...

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

來源

2013-08-01 06:02:19 Thanos

我認爲Firefox的你必須指定以下

@-moz-keyframes ANIMATION-NAME { 

}

來源

2013-08-01 05:49:48

嘗試。

@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-01 10:57:59 AppleTattooGuy

CSS3動畫不適用於非webkit瀏覽器

回答

相關問題