无法同时执行transform: scale与box-shadow动画的技术求助

嘿，我来帮你搞定这个动画不同步的问题！你遇到的情况其实是因为浏览器对不同CSS属性的渲染节奏感知差异，导致视觉上scale像是在box-shadow动画完成后才启动。咱们只需要微调关键帧的设置，让两个属性在整个动画周期里完全同步变化就行。

直接看修正后的完整代码吧：

body { 
  background-color: #333; 
}
.ripple { 
  width: 20px; 
  margin: 50px auto; 
  height: 20px; 
  background: #ccc; 
  border-radius: 50%; 
  animation: rippleeff 2s ease infinite; 
}
@keyframes rippleeff {
  0% { 
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4); 
    transform: scale(1.4); 
  }
  70% { 
    box-shadow: 0 0 0 20px rgba(204, 169, 44, 0); 
    transform: scale(1.6); 
  }
  100% { 
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0); 
    transform: scale(1); 
  }
}

<div class="ripple"></div>

关键点说明： #

• 我去掉了-moz-box-shadow前缀，现在主流浏览器都支持标准的box-shadow，没必要再加前缀啦；
• 核心是确保每一个关键帧节点（0%、70%、100%），box-shadow和transform: scale()都有明确的状态值，这样浏览器会同时为两个属性计算过渡动画，让它们完全同步执行；
• 原来的代码逻辑本身没问题，但可能因为浏览器对不同CSS属性的渲染优先级不同，导致视觉上出现先后顺序，现在强制每个节点都同步状态，就能解决这个感知上的不同步。

你运行这个代码试试，现在圆形元素的阴影扩散收缩和缩放动画会完美同步在2秒的周期里循环，不会再出现scale滞后的情况啦～

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