Question

以下动画在Chrome和Opera中运行良好，但它在Mozilla Firefox中无效。我无法弄清楚原因。

有人可以帮我解决问题吗？我的CSS出了什么问题？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

设置stroke-dashoffset: 100%看起来像一个整洁的东西，但100％的东西？ canonical definition是：

如果使用百分比，则该值表示当前视口的百分比...

…百分比计算为指定的sqrt((actual-width)**2 + (actual-height)**2))/sqrt(2)百分比。

Firefox似乎没有实现这一点。设置px长度使其有效：

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

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>

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

2 个答案: