LaVOZs

The World’s Largest Online Community for Developers

'; html - CSS Animations of opacity is not working on safari but works on google chrome - LavOzs.Com

@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>

The code should make the chunk of text I apply it to slide up after a 3-second delay and it works on Chrome and Android Chrome but not on my iPad with Safari. Any ideas why this is happening?

I am using this with Bootstrap, if that changes anything.

Safari doesn't support percentage as values for the opacity rule.
You must use a value between 0 and 1 for this browser:

@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>