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

我目前在CSS的@keyframes上遇到了一些问题，因为它们在Safari浏览器上似乎不起作用。不过，他们在铬上工作得很好

我已经核对了名单，但似乎没有什么运气

.app加载{
}
.app加载.spinner{
高度：200px；
宽度：200px；
动画：旋转2s线性无限；
-webkit动画：旋转2s线性无限；
变换原点：中心；
-webkit变换原点：中心；
位置：绝对位置；
排名：0；
底部：10；
保证金：自动；
}
.app加载.spinner.path{
笔划阵列：1200；
笔划偏移：0；
-webkit动画：dash 1.5s轻松输入输出无限；
笔划线头：圆形；
行程：#ddd；
}
@关键帧旋转{
100% {
变换：旋转（360度）；
}
}
@-webkit关键帧旋转{
100% {
-webkit变换：旋转（360度）；
}
}
@关键帧破折号{
0% {
笔划阵列：1200；
笔划偏移：0；
}
50% {
行程：89200；
行程偏移：-35px；
}
100% {
行程：89200；
行程偏移：-124px；
}
}
@-webkit关键帧{
0% {
笔划阵列：1200；
笔划偏移：0；
}
50% {
行程：89200；
行程偏移：-35px；
}
100% {
行程：89200；
行程偏移：-124px；
}
}

---

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

---

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

我在Safari中遇到了同样的问题，对关键帧使用了扩展的属性，而解决问题的方法是使用绝对严格的速记定义：

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

请注意，关键帧名称位于定义的末尾，我认为这可能是问题所在

资料来源：

---

还请注意，Safari的最新版本不使用

-webkit-

前缀，因此如果您的平台不以追溯性为目标，则无需添加前缀。

我将无法测试我的代码，因为我已经离开工作岗位。一旦我回来工作，我会告诉你最新情况！