Animation does not work on Safari and mobile-CodePudding

I have a bit of animation which works perfectly in chrome but doesn't on safari. Weird isn't it? Ok here's my code:

<header>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</header>

Ok this doesn't work in Safari and mobile as I said, there's no movement whatsoever. Also, still and only in Safari and mobile, on safari its become border squere What am I doing wrong?

here is my css

header{
  min-height: 100vh;
  background-color: #42A5F5;
  position: relative;
  overflow: hidden;
}

.ripple-1,
.ripple-2,
.ripple-3,
.ripple-4,
.ripple-5{
   height: 1px;
    width: 1px;
    position: absolute;
    left: 50%;
    bottom: 50%;
    background: dodgerblue;
    border-radius: 50%;
    transform: translate3d(-50%, 50%, 0);
    animation-name: ripple;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    will-change: transform, opacity;
}

.ripple-1{
  animation-delay: 0;
}

.ripple-2{
  animation-delay: 1s;
}

.ripple-3{
  animation-delay: 2s;
}

.ripple-4{
  animation-delay: 3s;
}

.ripple-4{
  animation-delay: 4s;
}

.ripple-5{
  animation-delay: 5s;
}

main{
  height: 4000px;
  background-color: #f7f7f7;
}

@keyframes ripple{
  0%{
    transform: translate3d(-50%, 50%, 0) scale(0);
    opacity: .33;
  }
  100%{
    transform: translate3d(-50%, 50%, 0) scale(2000);
    opacity: 0;
  }
}

I tried -webkit-, but didnt work :(

CodePudding user response：

use the below css it will work fine on safari as well.

header{
  min-height: 100vh;
  background-color: #42A5F5;
  position: relative;
  overflow: hidden;
}

.ripple-1,
.ripple-2,
.ripple-3,
.ripple-4,
.ripple-5{
   height: 1px;
    width: 1px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: dodgerblue;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation-name: ripple;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    will-change: transform, opacity, width;
    r
}

.ripple-1{
  animation-delay: 0;
}

.ripple-2{
  animation-delay: 1s;
}

.ripple-3{
  animation-delay: 2s;
}

.ripple-4{
  animation-delay: 3s;
}

.ripple-4{
  animation-delay: 4s;
}

.ripple-5{
  animation-delay: 5s;
}

main{
  height: 4000px;
  background-color: #f7f7f7;
}

@keyframes ripple{
  0%{
    opacity: .33;
  }
  100%{
    opacity: 0;
     height: 2000px;
    width: 2000px;
  }
}