关键帧无法在Safari中正常运行

Question

我正在网站上，并且有SVG动画徽标。它可以在chrome和firefox上正常运行，但是在Safari上使用dashoffset并不正确。话虽如此，它对野生动物园却很奇怪，只在不透明的情况下起作用。

我也尝试将dashoffset值设置为百分比，但这没有帮助。

.header-logo {
  stroke: #ffed16;
  stroke-width: 0.5;
  stroke-dasharray: 300;
  opacity: 10;
  animation: animate 2.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
@keyframes animate {
  0% {
    opacity: 0;
    fill: none;
    stroke-dashoffset: 400;
    stroke-width: 0.5;
  }
  50% {
    opacity: 10;
    fill: none;
    stroke-width: 0.5;
  }
  70% {
    fill: rgba(254, 215, 0, 0);
    stroke-width: 0.5;
  }
  80% {
    stroke-dashoffset: 100;
  }
  90% {
    stroke-width: 0.5;
  }
  100% {
    opacity: 10;
    fill: rgba(254, 215, 0, 1);
    stroke-width: 0.5;
    /* stroke-dashoffset: 0; */
  }
}

感谢。