transform动画需显式声明transition或animation，不能仅靠hover触发；关键帧中函数数量和类型须一致，且应指定具体属性而非all，配合transform-origin和GPU加速可提升效果与性能。
transform 动画必须用 transition 或 animation 控制，不能直接写在 hover 里“动”
很多人写 hover 时直接加 transform: translateX(10px) rotate(45deg)，发现没动画——因为 transform 本身不触发过渡，必须显式声明 transition 属性。浏览器不知道你希望哪些值变化、花多久、用什么缓动。
正确做法是：在默认状态提前写好 transition，且推荐指定具体属性而非用 all：
button {
transform: scale(1) rotate(0);
transition: transform 0.3s ease-out;
}
button:hover {
transform: scale(1.2) rotate(15deg) translateX(8px);
}
-
transition: all 0.3s容易导致意外动画（比如改了color也跟着过渡） - 多个
transform函数写在同一行才生效，顺序影响结果（先 scale 再 rotate 和反过来，视觉不同） - 如果只希望某一个动作有动画（比如只让旋转动，平移不动），得拆成两个元素或用 JS 控制类名
animation 中 transform 值必须保持函数数量和类型一致
用 @keyframes 写动画时，from 和 to（或各关键帧）里的 transform 函数要一一对应，否则浏览器会降级为“跳变”或插值错误。例如下面这段会出问题：
@keyframes bad {
from { transform: translateX(0); }
to { transform: translateX(100px) rotate(360deg); }
}
因为 from 只有一个函数，to 有两个，浏览器无法对齐插值维度。正确写法是补全：
立即学习“前端免费学习笔记（深入）”；
