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