正确做法是在每个关键帧中合并rotate和scale，如transform: rotate(360deg) scale(1.2)；:active适合按住时动画，点一下播完复位需JS控制class；务必显式设置transform-origin；避免重排，用will-change或translateZ(0)提升性能。

用 @keyframes 同时定义 rotate 和 scale

不能只写 transform: rotate(360deg) 或单独 scale(1.2)，必须把两者合并进同一个 transform 值里，否则后写的会覆盖前写的。浏览器对 transform 是单值覆盖逻辑，不是属性叠加。

正确做法是：在每个关键帧中显式写出完整变换，比如 transform: rotate(360deg) scale(1.2)；如果中间帧要过渡回原状，就得写 transform: rotate(0deg) scale(1)。

@keyframes spinAndZoom {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.15);
  }
  100% {
    transform: rotate(360deg) scale(1.2);
  }
}

给按钮绑定动画要用 :active 还是 animation 触发？

直接用 :active 配合 animation 最简单，但要注意：默认点击瞬间就触发，松手后动画不会自动“倒播”或复位，容易卡在末帧。如果想点一下就播一次、播完自动回弹，得配合 animation-fill-mode: forwards + 手动重置（比如用 JS 切换 class），或者改用 transition 模拟。

• :active 适合“按住时旋转缩放”，松手即停 —— 只需加 transition: transform 0.3s ease，再在 :active 里写 transform: rotate(360deg) scale(1.2)
• 要“点一下播完整动画再复位”，推荐用 JS 控制 class：button.classList.add('spinning')，动画结束后用 animationend 事件移除 class
• 别在 :active 里直接写 animation，因为 :active 状态极短（毫秒级），很可能动画刚启就结束了

transform-origin 不设好，旋转会偏移位置

默认 transform-origin 是 50% 50%（中心点），大多数按钮没问题。但如果按钮有 padding、border 或用了 flex 布局导致基线浮动，旋转可能看起来“晃动”或绕着奇怪的点转。

立即学习“前端免费学习笔记（深入）”；

保险做法是显式声明：

button {
  transform-origin: center;
  /* 或者更精确地 */
  transform-origin: 50% 50%;
}

如果按钮是图标按钮（比如只有 ），且希望绕图标中心转，建议把 transform-origin 设在父容器上，或给图标元素单独加 display: inline-block 再设 origin。

动画卡顿或闪动？检查这些硬伤

CSS 动画性能敏感点不在写法多炫，而在是否触发了重排（reflow）或非合成层绘制。以下三点最常被忽略：

• 确保按钮有 will-change: transform（仅动画期间），或直接加 transform: translateZ(0) 强制 GPU 加速
• 避免在动画中同时修改 width/height/top/left —— 这些会触发 layout，和 transform 混用极易掉帧
• 不要用 % 单位写 rotate（如 rotate(100%)），必须用 deg、rad 或 turn；scale 值也不能写成 scale(120%)，只能是无单位数字如 scale(1.2)

复杂交互下，优先用 transform + opacity 组合，它们是唯二能走合成层的属性。