Animation does not work on Safari and mobile - css

Question

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 class="ripple-1"></div>
<div class="ripple-2"></div>
<div class="ripple-3"></div>
<div class="ripple-4"></div>
<div class="ripple-5"></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 :(

Answer 1

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;
}
}