CSS Анимации непрозрачности не работает в сафари, но работает в 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 недопустимо, и браузеру не требуется префикс в течение нескольких лет для используемых вами правил.