html - 带有 ‘stroke-dashoffset’ CSS 动画的 SVG 文本在 Firefox 中不起作用

Question

以下动画在 Chrome 和 Opera 中运行良好，但在 Mozilla Firefox 中不起作用。我不明白为什么。

有人可以帮我解决这个问题吗？我的 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

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>