正确做法是在每个关键帧中合并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%;
}如果按钮是图标按钮（比如只有 <i></i>），且希望绕图标中心转，建议把 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 组合，它们是唯二能走合成层的属性。
