在safari

Question

我发生了以下演示的动画链（参见gif＆＃39; s）。 有一个名为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＆amp; Firefox）

示例2（Safari）

关于为什么它在野生动物园中表现如此奇怪的任何想法？

JSFiddle ：https://jsfiddle.net/9jqjssyw 这证明了这个问题，如果你看一下它的表现很好，即最初在所有文本中淡化，然后逐渐淡出每一行，但不同的延迟。然而，在野生动物园中，每条线都会眨眼，永远不会褪色。

Answer 1

当这样应用时，使用2个动画，您需要有2个关键帧，否则它将无法工作，因为您可以将相同的关键帧计时两次。 （好吧，Chrome倾向于使各种标准的东西都起作用：）

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

此外，您也可以使用timing-function with steps组合动画，但这个有2个关键帧的动画更简单。

Updated fiddle

Stack snippet

＆＃13;

＆＃13;

.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; }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不是一个庞大的动画用户。但是，我向你的小提琴看了一下，似乎，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>

  

编辑：在IE11和Edge上测试，您的动画过程完全如此   苹果浏览器。我想你想要的动画链接并不完全支持。

建议重新考虑你的动画过程，也许可以使用javascript。