html - CSS3 Animation not working on non-webkit browser -


i want create css3 animation works on non-webkit browsers , webkit browsers. included both css tags, refuses work on firefox. works great on chrome , safari. ideas?

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 {     {         stroke-dashoffset: 100%;      } }  @-webkit-keyframes antsanimation  {     {         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/

thanks again!

i've updated fiddle. have here

it appears on mozilla need have start , end stroke-dashoffset...

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

Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

css - Firefox for ubuntu renders wrong colors -