单独为transform子属性添加动画是否合规？Safari v17兼容性疑问

这是Safari 17的兼容性问题，不是你的代码写法有误。

Safari 17对独立的scale、rotate这类CSS变换属性的关键帧支持存在bug，当在同一关键帧中同时使用多个这类属性时，动画无法正常触发。而Chrome和Firefox已经完整支持了这些独立变换属性的动画逻辑。

修复方案 #

改用标准的transform属性整合变换效果，这是所有现代浏览器都兼容的写法：

div {
  animation: foo 1s linear infinite;
  width: 4rem;
  aspect-ratio: 1;
  background: blue;
}

@keyframes foo {
  0%, 100% {
    transform: scale(1) rotate(-20deg);
  }
  50% {
    transform: scale(1.5) rotate(20deg);
  }
}

<div></div>

修改后动画即可在Safari 17中正常运行。

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