CSS KeyFrames(动画)在Safari中不起作用

Question

我目前在CSS的@KeyFrames上面临一些问题，因为它们似乎无法在Safari浏览器上工作。他们在Chrome上工作正常。

我已经检查了Webkit CSS扩展名单，但我似乎没有任何运气。

.app-loading {
}
.app-loading .spinner {
  height: 200px;
  width: 200px;
  animation: rotate 2s linear infinite;
  -webkit-animation: rotate 2s linear infinite;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  position: absolute;
  top: 0;
  bottom: 10;
  margin: auto;
}
.app-loading .spinner .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
  stroke: #ddd;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

<div class="app-loading">
  <svg class="spinner" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
  </svg>
</div>

我也在JSFiddle上创建了一个演示。

我了解那里有很多类似的问题，但是它们似乎都没有解决我现在面临的问题：

1(CSS KeyFrame Animations Safari

2(CSS3动画在Safari中不起作用

希望这里有一些帮助。谢谢！

---

编辑1：

我尝试了什么其他事情 - 用以下

替换-webkit-animation速记

-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: infinite;

Answer 1

在Safari中，速记符号不起作用。

所以这将行不通：

-webkit-animation: rotate 2s linear infinite;

尝试以这样的完整形式编写动画：

-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: infinite;

也对您的其他动画做同样的事情，看看它是否有效

Answer 2

我在野生动物园中遇到了同样的问题，使用扩展的键框的属性，以及解决问题的原因是使用绝对严格的速记定义：

/* @keyframes duration | timing-function | delay | 
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

请注意，密钥帧名称在定义的末尾，我认为这可能是问题。

来源：https：//developer.mozilla.org/en-us/docs/web/css/animation

另外，请注意，最近版本的Safari不使用-webkit-前缀，因此无需补充说，如果您的平台不打算重新兼容。