Safari中CSS扫动动画失效问题排查

问题原因 #

1. SVG属性动画支持差异：Safari（包括WKWebView）对SVG元素的cx这类原生属性的CSS动画支持存在局限，无法像Chrome/Edge那样平滑过渡，直接跳转到关键帧末尾是因为浏览器无法解析这类属性的动画过渡逻辑。
2. CSS语法错误：原代码中transform:translate3d(0, 0, 0)末尾缺少分号，导致后续的-webkit-前缀属性无法被正确解析，进一步影响动画执行。

修复方案 #

改用CSS transform: translateX() 实现圆形的水平移动（这是Safari完全支持的标准动画方式），同时修正语法错误：

修正后的代码 #

@keyframes sweep {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100% - 8px));
  }
}

@-webkit-keyframes sweep {
  from {
    -webkit-transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(calc(100% - 8px));
  }
}

circle {
  /* 标准属性 */
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-name: sweep;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: left center;
  
  /* 兼容Safari的前缀属性 */
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: sweep;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-transform-origin: left center;
}

<svg width="100%" height="20px">
  <g transform="translate(0,10)">
    <rect width="100%" height="2" y="-1" x="0" stroke="green" />
    <!-- 初始位置设为左侧，通过transform移动 -->
    <circle r="4" cx="4" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)" />
  </g>
</svg>

关键细节说明 #

• 使用translateX替代cx动画：calc(100% - 8px)是为了让圆形移动到条形末尾时不超出边界（圆形半径为4px，直径8px）。
• 设置transform-origin: left center确保移动的基准点是圆形左侧，和原逻辑一致。
• 修正了原CSS的语法错误，保证所有属性都能被正确解析。

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