Css safari中意外的动画行为

我在下面演示了一系列动画（参见gif）。 有一个叫做

fadeIn

的特殊动画在chrome和firefox上运行良好，但在safari中却有这种奇怪的闪烁行为

以下是动画代码：

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 0.4; }
}

下面是它如何应用于元素：

animation:
    .35s ease 1.35s forwards fadeIn,
    .35s ease 2s reverse forwards fadeIn;

注：所有这些都在构建过程中自动添加前缀（在inspector中检查并确认）

示例1（Chrome和Firefox）

示例2（Safari）

你知道为什么它在狩猎中表现得如此奇怪吗

JSFiddle：

---

这说明了这个问题，如果你在chrome中查看，它的表现很好，即最初在所有文本中淡出，然后以不同的延迟逐个淡出每一行。然而，在safari中，每一行都是闪烁的，并且从不褪色。

我不是一个巨大的动画用户。不过，我看了看你的小提琴，似乎Safari不支持链接动画

safari会忽略您的第一个“fadeIn”动画，并直接进入第二个

只需删除第一个动画行，即可查看复制的Safari行为：

。示例{
不透明度：0；
文本转换：大写；
文本对齐：居中；
字体系列：无衬线；
利润率：10px0；
}
.一{
动画：.35s轻松2s反向前进fadeIn；
}
.二{
动画：.35s轻松4s反向前进fadeIn；
}
.三{
动画：.35s轻松6s反向前进fadeIn；
}
@关键帧淡入淡出{
0% {
不透明度：0；
}
100% {
不透明度：0.7；
}
}

Text 1
文本3
Text 4

当这样应用时，对于2个动画，您需要有2个关键帧，否则它将不起作用，因为您不能对相同的关键帧计时两次。（嗯，Chrome倾向于让各种非标准的东西正常工作：）

下面的示例在Chrome/Firefox/IE11/Edge上测试成功

此外，您可能还可以使用来组合动画，尽管此动画具有2个关键帧要简单得多

堆栈片段

。示例{
不透明度：0；
文本转换：大写；
文本对齐：居中；
字体系列：无衬线；
利润率：10px0；
}
.一{
动画：
.35秒轻松0.5秒前飞，
.35s前向衰减；
}
.二{
动画：
.35秒轻松0.5秒前飞，
.35s前向衰减；
}
.三{
动画：
.35秒轻松0.5秒前飞，
.35s缓变6s向前衰减；
}
@关键帧淡入淡出{
0%{不透明度：0；}
100%{不透明度：0.7；}
}
@关键帧淡出{
0%{不透明度：0.7；}
100%{不透明度：0；}
}

Text 1
文本3
文本4

这很有效！我不知道这个动画警告。一旦堆栈溢出解除时间限制，我将立即奖励赏金。谢谢。如果有人遇到我的问题，这也适用于safari在尝试使用多个动画时，由于某些原因，每个动画都必须是唯一的，safari似乎无法重用关键帧动画。