svg stroke-dashoffset animation not working in safari or firefox - svg

Question

This animation of an svg works fine in chrome but not safari and firefox. I have this css:
#one{
fill:#97e8da;
stroke: $green;
}
#two{
fill: #46ceb4;
stroke: $green;
}
#one,#two{
stroke-width: 0;
-webkit-animation:load 3s linear;
animation:load 3s linear;
}
#-webkit-keyframes load {
0% {
stroke-width: 7pt;
stroke: #46ceb4;
stroke-dashoffset: 1300;
fill-opacity: 0;
}
20%{
fill-opacity: .3;
stroke-width: 2pt;
stroke: #fff;
}
50%{
stroke-width: 1pt;
}
90%{
stroke-width: 0;
stroke-dashoffset: 500;
}
100%{
stroke-dashoffset:0;
fill-opacity: 1;
}
}#keyframes load {
0% {
stroke-width: 7pt;
stroke: #46ceb4;
stroke-dashoffset: 1300;
fill-opacity: 0;
}
20%{
fill-opacity: .3;
stroke-width: 2pt;
stroke: #fff;
}
50%{
stroke-width: 1pt;
}
90%{
stroke-width: 0;
stroke-dashoffset: 500;
}
100%{
stroke-dashoffset:0;
fill-opacity: 1;
}
}
And my inline svg looks like this:
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="130px" height="113px" viewBox="-10.062 -10.34 130 113" enable-background="new -10.062 -10.34 130 113" xml:space="preserve">
<path id="one" stroke-dasharray="1200 1000" d="M120,81.456L39.094 81.456 50.188 64.799 88.688 64.799 46.472 -10.184 66.943 -10.184 109.18 62.635 z"/>
<path id="two" stroke-dasharray="1200 1000" d="M0.011,101.998L-10 83.913 44.068 -8.737 84.229 62.414 63.607 62.414 43.62 27.393 z"/>
</svg>
In safari I can see the dash animation occurring but the path has no colour, it just clips the shape. In both cases the fill opacity does work

Answer 1

What's the $ doing before green? Fixing this makes it work in Firefox for me.
#one{
fill:#97e8da;
stroke: green;
}
#two{
fill: #46ceb4;
stroke: green;
}

Answer 2

I'm not exactly sure what your goal is, but I have it working the same on Firefox, Safari and Chrome.
http://codepen.io/Bushwazi/pen/jqgaZO
I pulled the stroke-dasharray out of inline and put it into the CSS, along with stroke-dashoffset
I used AutoPrefixer for the prefixes, because it's smarter than us. This could be where your's is failing, but honestly I'm guessing.
I log the getTotalLength value to get the actual number to use in the array and offset.
The animation loops in the pen, but just so you can watch it.