我在下面演示了一系列动画(参见 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 中,每一行都是闪烁的并且永远不会淡入。
最佳答案
当这样应用时,如果有 2 个动画,您需要有 2 个关键帧,否则它将无法工作,因为您不能为相同的关键帧计时两次。 (好吧,Chrome 倾向于让各种非标准的东西工作:)
以下示例在 Chrome/Firefox/IE11/Edge 上测试成功。
此外,您还可以使用 timing-function with steps 来制作动画。 ,虽然这个有 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>
关于css - Safari 中的意外动画行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44027294/