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
Post a Comment