不透明度的 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 不支持百分比作为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值无效，并且几年以来您使用的规则不需要浏览器的前缀。