Question

我有一个CSS3动画正在为我的网站制作，其中SVG的stroke-dashoffset动画了。它可以在Chrome和Opera上正常运行，但不能在Safari或Firefox上运行。在Safari上，文本显示但没有动画。在Firefox上，文本完全不显示。对我来说，最重要的是使Safari正常工作，以便在iOS上正确显示。

我已经尝试了很多方法，包括更改单位，使用百分比关键帧而不是to和from，添加和删除前缀，不为动画属性使用简写，更改各种属性，尝试使用不同的Webkit前缀，再次检查我是否没有使用负数来制作stroke-dashoffset的动画等，到目前为止没有任何效果。我看了我可以在网上找到的每一篇文章，但都没有找到解决方案。我希望这是我忽略的一个简单问题，或者有一个简单的解决方法，但我担心这是一个Webkit错误。

我在下面放了一个JSfiddle，它可以复制Safari和Firefox中的问题，并可以在Chrome中正常工作： https://jsfiddle.net/lystroid/2a97ntf1/58/

以下是相关的HTML和CSS：

HTML

<svg width="80vw" height="150vw">
  <text y = "500px" fill="none" stroke="#e2e2e2" stroke-width="0.5">ABCDE</text>
</svg>

CSS

text {
  font-family:arial;
  text-align: center;
  color: #e2e2e2;
  font-size: 23vw;
  line-height: 0;
  stroke-dasharray: 98vw;
  stroke-dashoffset: 98vw;
  animation: draw 7s ease 1 forwards;
  -webkit-animation: draw 7s ease 1 forwards;
  -moz-animation: draw 7s ease 1 forwards;
  -webkit-animation: draw 7s ease 1 forwards;
  -o-animation: draw 7s ease 1 forwards;
  -ms-animation: draw 7s ease 1 forwards;
}

@-webkit-keyframes draw {
  from {
    stroke-dashoffset: 98vw;
  }
  to {
    stroke-dashoffset: 0vw;
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 98vw;
  }
  to {
    stroke-dashoffset: 0vw;
  }
}

我还没有在Internet Explorer或Edge中测试动画。

感谢阅读！

编辑：我要澄清一下页面上有两个动画。其中一个标题用于字幕，该字幕在所有浏览器上均适用。我在这个问题中所指的动画是SVG文字上的动画，上面写着“ ABCDE”

stroke-dashoffset动画在Safari中不起作用

0 个答案: