WebKit Transform Rotate在Safari中失效，求CSS旋转动画兼容方案

问题分析 #

你这段六边形旋转动画在Safari里失效的核心原因是在同一个关键帧中重复声明了transform属性。浏览器解析CSS时，同一个属性的重复声明会被后面的覆盖——比如你在68%的关键帧里写了：

transform:rotate(0deg);
transform:scale(1);

最终浏览器只会应用transform:scale(1)，旋转效果直接被忽略了。Safari对这种写法的兼容性要求更严格，这就导致整个动画的旋转逻辑完全乱掉了。

修复方案 #

把每个关键帧里的多个变换操作合并到同一个transform属性中，用空格分隔不同的变换函数就行（变换顺序不影响最终效果，保持统一即可）：

@keyframes hexagon {
  0% { 
    transform: rotate(0deg); 
  }
  50% { 
    transform: rotate(360deg); 
  }
  68% { 
    transform: rotate(0deg) scale(1); 
  }
  71% { 
    transform: rotate(0deg) scale(1); 
  }
  76% { 
    transform: rotate(360deg) scale(1.25); 
  }
  85% { 
    transform: rotate(360deg) scale(1); 
  }
  86% { 
    transform: rotate(360deg) scale(1); 
  }
  100% { 
    transform: rotate(0deg); 
  }
}

额外兼容性优化 #

如果需要兼容更旧版本的Safari，可以添加-webkit-前缀（现在主流新版本Safari已经支持标准语法，但保险起见可以加上）：

@-webkit-keyframes hexagon {
  /* 复制上面修复后的关键帧内容 */
}

/* 给目标元素应用动画时也要加前缀 */
.your-hexagon-class {
  -webkit-animation: hexagon 2s infinite;
  animation: hexagon 2s infinite;
}

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