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

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

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

Answer 1

当像这样应用时，对于 2 个动画，您需要有 2 个关键帧，否则它将无法工作，因为您无法对相同的关键帧进行两次计时。（好吧，Chrome 倾向于让各种非标准的东西发挥作用:)

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

此外，您还可以使用带有步骤的计时功能来组合动画，尽管这个具有 2 个关键帧的动画要简单得多。

更新了小提琴

堆栈片段

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