SVG text with ‘stroke-dashoffset’ CSS animation not working in Firefox - html

Question

The following animation works fine in Chrome and Opera, but it doesn't work in Mozilla Firefox. I can't figure out why.
Can someone please help me to fix the problem? What is wrong with my CSS?
#text-logo {
font-family: 'Shrikhand', cursive;
stroke-dashoffset: 100%;
stroke-dasharray: 100%;
-moz-animation: draw 8s forwards ease-in;
-webkit-animation: draw 8s forwards ease-in;
animation: draw 8s forwards ease-in;
background-clip: text;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#-moz-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
<div class="draw_text">
<svg width="1092" height="220">
<text x="150" y="200" fill="#fff" stroke="#333" id="text-logo" stroke-width="2" font-size="95">WHO I AM ?</text>
</svg>
</div>

Answer 1

Units have to match in Firefox so if the base is a percentage unit then the animated value must be in percentages too.
There's no such thing as a -moz-animation or -moz-keyframes and any prefixed animations should be placed before the unprefixed version. I've fixed that too below.
#text-logo {
font-family: 'Shrikhand', cursive;
stroke-dashoffset: 100%;
stroke-dasharray: 100%;
-webkit-animation: draw 8s forwards ease-in;
animation: draw 8s forwards ease-in;
background-clip: text;
}
#-webkit-keyframes draw {
100% {
stroke-dashoffset: 0%;
}
#keyframes draw {
100% {
stroke-dashoffset: 0%;
}
}
}
<div class="draw_text">
<svg width="1092" height="220">
<text x="150" y="200" fill="#fff" stroke="#333" id="text-logo" stroke-width="2" font-size="95">WHO I AM ?</text>
</svg>
</div>

Answer 2

Setting stroke-dashoffset: 100% looks like a neat thing, but 100% of what? The canonical definition is:
If a percentage is used, the value represents a percentage of the current viewport …
… the percentage is calculated as the specified percentage of sqrt((actual-width)**2 + (actual-height)**2))/sqrt(2).
Firefox seems to not implement that. Setting px lengths makes it work:
#text-logo {
font-family: 'Shrikhand', cursive;
stroke-dashoffset: 1114px;
stroke-dasharray: 1114px;
-moz-animation: draw 8s forwards ease-in;
-webkit-animation: draw 8s forwards ease-in;
animation: draw 8s forwards ease-in;
background-clip: text;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#-moz-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
<div class="draw_text">
<svg width="1092" height="220">
<text x="150" y="200" fill="#fff" stroke="#333" id="text-logo" stroke-width="2" font-size="95">WHO I AM ?</text>
</svg>
</div>