html - 不透明度的 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>

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

我正在将它与 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 值无效，并且几年以来浏览器都不需要前缀来满足您使用的规则。