CSS不透明动画不适用于野生动物园，但适用于谷歌浏览器

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上运行。任何想法为什么会这样？

我正在与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值无效，并且由于使用的规则已经使用了几年，因此没有浏览器需要前缀。