Safari 中的意外动画行为

Question

我在下面演示了一系列动画（参见 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;

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

示例 1（Chrome 和 Firefox）

示例 2（Safari）

关于为什么它在 safari 中表现如此奇怪的任何想法？

JSFiddle: https://jsfiddle.net/9jqjssyw 这证明了这个问题，如果您查看 chrome 它表现良好，即最初淡入所有文本，然后以不同的延迟逐行淡出。然而，在 safari 中，每一行都是闪烁的并且永远不会淡入。

Answer 1

我不是一个超级动画用户。但是，我稍微看了看您的fiddle，似乎 Safari 不支持链接动画。

您的第一个 "fadeIn" 动画被 safari 忽略，直接进入第二个动画。

当我们简单地删除第一行动画时，查看重现的 Safari 行为：

.example {
  opacity: 0;
  text-transform: uppercase;
  text-align: center;
  font-family: sans-serif;
  margin: 10px 0;
}

.one {
  animation: .35s ease 2s reverse forwards fadeIn;
}

.two {
  animation: .35s ease 4s reverse forwards fadeIn;
}

.three {
  animation: .35s ease 6s reverse forwards fadeIn;
}

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

<div class="example one">Text 1</div>
<div class="example two">Text 3</div>
<div class="example three">Text 4</div>

Edit: Tested on IE11 and Edge, your animation process acts exactly as Safari. I guess animation chaining as you tried is not fully supported.

建议是重新考虑您的动画过程并可能利用 javascript。

Answer 2

像这样应用时，如果有 2 个动画，您需要有 2 个关键帧，否则它将无法工作，因为您不能为相同的关键帧计时两次。（好吧，Chrome 倾向于使各种 none 标准的东西起作用 :)

以下示例在 Chrome/Firefox/IE11/Edge 上测试成功。

此外，您也许还可以使用 timing-function with steps 将动画放在一起，尽管这个具有 2 个关键帧的动画要简单得多。

Updated fiddle

堆栈片段

.example {
  opacity: 0;
  text-transform: uppercase;
  text-align: center;
  font-family: sans-serif;
  margin: 10px 0;
}

.one {
  animation:
    .35s ease 0.5s forwards fadeIn,
    .35s ease 2s forwards fadeOut;
}

.two {
  animation:
    .35s ease 0.5s forwards fadeIn,
    .35s ease 4s forwards fadeOut;
}

.three {
  animation:
    .35s ease 0.5s forwards fadeIn,
    .35s ease 6s forwards fadeOut;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 0.7; }
}
@keyframes fadeOut {
  0% { opacity: 0.7; }
  100% { opacity: 0; }
}

<div class="example one">Text 1</div>
<div class="example two">Text 3</div>
<div class="example three">Text 4</div>

Safari 中的意外动画行为

Unexpected animation behaviour in safari

css

safari

animation

keyframe