时间戳

首页 > 解决方案 > stroke-dashoffset 动画在 Safari 中不起作用

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

问题描述

我正在为我的网站制作一个 CSS3 动画，其中stroke-dashoffsetSVG 是动画的。它适用于 Chrome 和 Opera，但不适用于 Safari 或 Firefox。在 Safari 上，文本显示但没有动画。在 Firefox 上，文本根本不显示。让 Safari 正常工作对我来说是最重要的，这样它才能在 iOS 上正确显示。

我已经尝试了很多东西，包括更改单位，使用百分比关键帧而不是toand 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”

标签： htmlcssanimationsafariwebkit

解决方案

推荐阅读