动画不适用于Safari和移动

Question

我有一些动画，这是完美的铬，但没有在狩猎。很奇怪不是吗？好的，这是我的代码：

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

好吧，这不适用于Safari和手机，就像我说的，没有任何运动。而且，也只有在Safari和手机上，它变成了边界蹲，我做错了什么？

这是我的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;
  }
}

我试过- -webkit- -但没有起作用

Answer 1

使用下面的css，它在safari上也能很好地工作。

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