SVG text with CSS animations with animations not working in Firefox

Question

The following animation works fine in Chrome and Opera, but it doesn't work in Mozilla Firefox. I can’t understand why.

Can someone help me solve 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>

Run codeHide result

Answer 1

The setup stroke-dashoffset: 100%looks neat, but 100% of what? Canonical definition :

If percentage is used, the value is 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 does not seem to implement this. Setting the length pxmakes 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>

Run codeHide result

Answer 2

Firefox, , , .

, -moz-animation -moz-keyframes, . .

#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>

Hide result