Safari及移动端波纹动画失效问题求助

核心问题点 #

• 重复CSS选择器：你重复定义了两次.ripple-4，第二次的animation-delay:4s覆盖了第一次的3s，导致动画序列错乱。
• Safari极小尺寸元素渲染异常：初始1px×1px的元素设置border-radius:50%时，Safari无法正确渲染为圆形，表现为方形边框。
• 动画前缀不完整：仅部分添加-webkit-前缀不足以覆盖Safari的兼容要求，且初始状态的scale(0)与translate3d组合易触发渲染异常。

修复后完整代码 #

HTML（无需修改） #

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

CSS（修复版） #

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

.ripple-1,
.ripple-2,
.ripple-3,
.ripple-4,
.ripple-5{
  /* 增大初始尺寸，解决Safari方形边框问题 */
  height: 2px;
  width: 2px;
  position: absolute;
  left: 50%;
  bottom: 50%;
  background: dodgerblue;
  border-radius: 50%;
  /* 简化变换逻辑，避免渲染冲突 */
  transform: translate(-50%, 50%) scale(0);
  /* 完整添加webkit前缀 */
  -webkit-animation-name: ripple;
  animation-name: ripple;
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}

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

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

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

.ripple-4{
  /* 修复重复定义问题 */
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

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

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

/* 添加webkit前缀的关键帧 */
@-webkit-keyframes ripple{
  0%{
    transform: translate(-50%, 50%) scale(0);
    opacity: .33;
  }
  100%{
    transform: translate(-50%, 50%) scale(2000);
    opacity: 0;
  }
}

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

关键修复说明 #

1. 解决方形边框：将初始尺寸从1px改为2px，让Safari能正确识别border-radius:50%为圆形；同时将translate3d简化为translate，减少渲染压力。
2. 完善兼容前缀：给@keyframes和所有animation-*属性添加-webkit-前缀，确保Safari能解析动画规则。
3. 修复序列错误：删除重复的.ripple-4定义，保证动画延迟序列正常。
4. 优化变换逻辑：合并初始变换为translate(-50%,50%) scale(0)，避免多变换组合引发的渲染异常。

内容的提问来源于stack exchange，提问作者Amad