不透明的CSS动画不适用于safari，但适用于谷歌浏览器

Question

@keyframes fadeInUp {
from {
opacity: 0%;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 100%;
-webkit-transform: none;
transform: none;
}
}
.fadeIn {
margin-top: 2rem;
opacity: 0;
animation: fadeInUp 1s ease-in-out 0s forwards;
-webkit-animation-name: fadeInUp 1s ease-in-out 0s forwards;
animation-delay: .7s;
-webkit-animation-delay: .7s;
&.second {
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
}

<div class="col-md-10 px-3 fadeIn">
<h1>
Welcome to my personal website......etcetcetc
</h1>
</div>

该代码应该使我应用的文本块在 3 秒延迟后向上滑动，它适用于 Chrome 和 Android Chrome，但不适用于带有 Safari 的 iPad。知道为什么会这样吗？

我正在将其与引导一起使用，如果这改变了什么。

Answer 1

Safari 浏览器不支持将百分比作为opacity规则的值。
必须为此浏览器使用0到1之间的值：

@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeIn {
margin-top: 2rem;
opacity: 0;
animation: fadeInUp 1s ease-in-out .7s forwards;
}

<div class="col-md-10 px-3 fadeIn">
<h1>
Welcome to my personal website......etcetcetc
</h1>
</div>

也不相关，但您的-webkit-animation-name值无效，并且由于您使用的规则几年来，没有浏览器需要前缀。