我发生了以下演示的动画链(参见gif' 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& Firefox)
示例2(Safari)
关于为什么它在野生动物园中表现如此奇怪的任何想法?
JSFiddle :https://jsfiddle.net/9jqjssyw 这证明了这个问题,如果你看一下它的表现很好,即最初在所有文本中淡化,然后逐渐淡出每一行,但不同的延迟。然而,在野生动物园中,每条线都会眨眼,永远不会褪色。
答案 0 :(得分:4)
当这样应用时,使用2个动画,您需要有2个关键帧,否则它将无法工作,因为您可以将相同的关键帧计时两次。 (好吧,Chrome倾向于使各种标准的东西都起作用:)
以下示例已在Chrome / Firefox / IE11 / Edge上成功测试。
此外,您也可以使用timing-function with steps组合动画,但这个有2个关键帧的动画更简单。
Stack snippet
.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>
&#13;
答案 1 :(得分:0)
我不是一个庞大的动画用户。但是,我向你的小提琴看了一下,似乎,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。