必须将平移和旋转合并到单条transform声明中，如transform: translateX(100px) rotate(45deg)；分开写会因CSS层叠被覆盖；关键帧需显式定义起止transform值，且所有帧保持函数类型一致，配合transform-origin和will-change可优化性能与动画表现。
animation 中用 transform 实现平移加旋转，必须写在一个 transform 声明里
分开写 transform: translateX(100px); transform: rotate(45deg); 会导致后一条覆盖前一条——CSS 层叠规则下，同名属性后声明者生效。动画关键帧里也一样，必须合并为单条声明。
- ✅ 正确写法：
transform: translateX(100px) rotate(45deg); - ❌ 错误写法：
transform: translateX(100px); transform: rotate(45deg);（后者完全丢弃位移） - 顺序有影响：先平移再旋转，和先旋转再平移，视觉结果不同；通常按「从左到右」的书写顺序执行（即
translate先算，rotate在新坐标系上作用）
@keyframes 里不要漏掉起始/结束帧的 transform 值
哪怕起始状态是“没动”，也要显式写出 transform: translate(0) rotate(0);，否则浏览器可能从空值 fallback 到 none，导致动画跳变或不触发硬件加速。
@keyframes slideSpin {
0% {
transform: translateX(0) rotate(0);
}
100% {
transform: translateX(200px) rotate(360deg);
}
}
- 如果 0% 没写
transform，浏览器可能用默认transform: none，而none和translateX(...) rotate(...)不是可插值类型，动画会卡顿或直接跳 - 所有关键帧都应包含完整
transform值，避免混用translateX和translate等不兼容函数（例如translateX(100px)和translate(100px, 0)可插值，但和matrix()就不行）
想让旋转中心点不是默认左上角？改 transform-origin
transform-origin 控制旋转、缩放的基准点，默认是 50% 50%（元素中心），但常被误以为是左上角。若要绕左上角转，得显式设成 0 0；绕底部中心转，就用 50% 100%。
- 该属性不影响平移，只影响
rotate、scale、skew的作用原点 - 必须和
animation同级设置（写在动画元素上），不能塞进@keyframes里——它不是可动画属性（多数浏览器不支持对transform-origin做平滑过渡） - 示例：
div { animation: slideSpin 2s; transform-origin: bottom center; }
性能关键：加 will-change: transform 或确保触发 GPU 加速
纯 transform + opacity 是少数能走 GPU 合成层的 CSS 属性。但老旧 Chrome 或 Safari 有时仍走 CPU 绘制，尤其当元素有复杂祖先层级或未启用硬件加速时。
立即学习“前端免费学习笔记（深入）”；
- 稳妥做法：给动画元素加
will-change: transform;（仅在需要时加，动画结束建议用 JS 移除，避免内存泄漏） - 更轻量替代：
transform: translateZ(0);或transform: translate3d(0, 0, 0);可强制创建合成层，但注意这会让元素脱离文档流影响（一般无感） - 别在
@keyframes里写will-change——它不支持动画，只接受初始值
transform，或把多个 transform 声明拆开写。这两处一错，动画就断在第一步。 
