CSS 关键帧（动画）在 Safari 中不起作用

Question

我目前在使用 CSS 的 @keyframes 时遇到了一些问题，因为它们似乎不适用于 Safari 浏览器。不过，它们在 Chrome 上运行良好。

我已经检查了WebKit CSS extensions 的列表，但我似乎没有任何运气。

.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 animation not working in 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 时遇到了同样的问题，对关键帧使用扩展属性，而对我来说解决问题的是使用绝对严格的速记定义：

/* @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- 前缀，因此如果您的平台不以向后兼容为目标，则无需添加。

Answer 2

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

对你的其他动画也这样做，看看它是否有效