不透明度的 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值無效，並且幾年以來您使用的規則不需要瀏覽器的前綴。