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;

对其他动画也进行同样的操作，看看它是否有效