CSS 不透明度动画不适用于 safari，但适用于 google chrome

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 但不适用于我的 iPad 使用 Safari。知道为什么会这样吗？

我正在将其与 Bootstrap 一起使用，如果有任何变化的话。

Answer 1

Safari doesn't support 百分比作为 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 值无效，并且几年以来浏览器都不需要前缀来满足您使用的规则。

CSS 不透明度动画不适用于 safari，但适用于 google chrome

CSS Animations of opacity is not working on safari but works on google chrome

html

css

safari