必须显式声明transition: transform .3s ease，且transform需写成rotate(30deg) scale(1.5)复合值；搭配will-change: transform启用GPU加速，并用cubic-bezier(.25,.46,.45,.94)优化缓动。
transition 与 transform 同时生效却没动画？
直接给 transform 加 transition 却看不到旋转或缩放动画，大概率是过渡属性没写对。CSS 过渡必须明确指定要过渡的属性名，不能只写 transition: all .3s 就指望 transform 自动动起来——部分浏览器对 all 的解析不一致，尤其涉及矩阵计算时会跳过动画。
- 必须显式写成
transition: transform .3s ease - 如果同时过渡旋转和缩放，不需要拆成多条声明，
transform本身支持复合值，一条transition就够 - 确保触发变化的是
transform值本身（比如从rotate(0deg) scale(1)到rotate(45deg) scale(1.2)），而不是靠切换 class 时间接改变其他属性间接影响 transform
rotate() 和 scale() 能否在同一个 transform 里共存？
可以，而且必须共存——transform 是单值属性，多次声明会覆盖，不是叠加。想同时旋转+缩放，得把它们写在一个 transform 声明里，顺序还会影响结果。
- 顺序很重要：先缩放再旋转，和先旋转再缩放，视觉效果不同（缩放会影响旋转中心的像素密度）
- 推荐统一用「先旋转后缩放」：更符合直觉，也避免缩放后旋转半径变大导致位移异常
- 不要这样写：
transform: rotate(30deg);
——第二行会完全覆盖第一行
transform: scale(1.5); - 应该这样写：
transform: rotate(30deg) scale(1.5);
transition-duration 太短或 easing 不匹配导致“卡顿”
缩放+旋转组合动画容易显得生硬，不是因为代码错，而是 timing function 和持续时间没适配形变特性。纯 ease 在中段加速太猛，旋转角度变化快、缩放比例变化慢时，人眼会感知为“转得急、长得慢”，像脱节。
- 改用
cubic-bezier(.25,.46,.45,.94)（类似ease-out但收尾更柔和），能缓解旋转突兀感 - 缩放建议略长于旋转：比如
rotate(720deg)用.6s，scale(1.8)配.7s——但注意：不能分开设 duration，必须统一用一个transition声明，所以取较长值 - 避免
transition: transform .1s，低于 .2s 的过渡人眼基本识别不出渐变，看起来就是闪现
硬件加速没开启导致动画掉帧
哪怕 transition 和 transform 写对了，老设备或复杂页面里仍可能卡顿。根本原因是浏览器没把该元素提升为独立合成层，所有变换都在主线程做 CPU 渲染。
立即学习“前端免费学习笔记（深入）”；
- 强制启用 GPU 加速：加
transform: translateZ(0)或will-change: transform - 推荐用
will-change: transform，比translateZ(0)更语义化，且现代浏览器优化更好 - 但别滥用：只加在真正需要过渡的元素上，全局加会导致内存占用飙升
- 验证是否生效：Chrome DevTools → Rendering → 勾选 “Paint flashing”，动画时只有目标元素高亮，说明合成层分离成功
