transform 是动画的关键驱动值，因其支持硬件加速与平滑插值；应避免混用 transform 与 top/left，多个变换需合并声明；动画中静态 transform 会被覆盖，需显式写入 keyframes；transform-origin 影响旋转缩放中心，不可直接动画；will-change 可提示 GPU 加速但需谨慎使用；动画结束后 transform 状态残留需手动重置。
transform 属性是动画的关键驱动值
CSS 动画本身不直接改变元素的几何状态，它只是按时间轴插值更新某个 CSS 属性。而 transform 是少数几个能被高效硬件加速、且支持平滑插值的属性之一。如果你在 @keyframes 中修改 left 或 top，浏览器会触发重排（reflow），卡顿明显；但改 transform: translateX(100px)，只走合成层，性能好得多。
-
transform支持的子属性（translate、rotate、scale、skew、matrix）都可作为动画目标值 - 不要在动画中混用
transform和top/left—— 浏览器会丢弃transform以保兼容，导致行为不可控 - 多个变换需写在同一
transform声明里：transform: rotate(45deg) scale(1.2)，不能拆成两行
animation 和 transform 的组合写法有优先级陷阱
当元素同时有 transform（静态）和 animation（含 transform 动画）时，最终变换是两者叠加的结果，但顺序很重要：动画里的 transform 值会覆盖静态声明，而不是追加。
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
.box {
transform: rotate(10deg); /* 这个会被动画里的 transform 完全覆盖 */
animation: slide 1s;
}想保留初始旋转并平移？必须把 rotate(10deg) 显式写进 keyframes：
@keyframes slide-with-rotate {
from { transform: rotate(10deg) translateX(0); }
to { transform: rotate(10deg) translateX(200px); }
}transform-origin 影响动画的旋转/缩放中心点
transform-origin 默认是 50% 50%（元素中心），但一旦你改了它，所有基于 transform 的动画都会以此为基准点——包括 rotate 的轴心、scale 的缩放原点。
立即学习“前端免费学习笔记（深入）”；
- 动画中不能用
animation单独给transform-origin加过渡（它本身不支持动画） - 如果需要动态切换原点（比如先绕左上角转，再绕底部翻），得用 JS 切换 class，配合
transition: transform-origin - 注意单位：百分比相对自身盒模型，
px/em是绝对偏移，别在响应式布局里硬写像素值
will-change 提前提示浏览器哪些 transform 会变
对频繁动画的元素（如滚动中持续旋转的图标），仅靠 transform 不一定能触发 GPU 加速。加 will-change: transform 是告诉浏览器：“这个元素的 transform 值即将变化”，促使它提前升格到独立图层。
- 不要全局滥用：
will-change会占用额外内存，且可能引发渲染异常（如 Safari 下偶发闪烁） - 最佳实践是 JS 控制：动画开始前加 class 触发
will-change，结束后立即移除 - 现代 Chrome/Firefox 对
transform+opacity组合已自动优化，will-change往往不是必需项
真正容易被忽略的是：动画结束后的 transform 状态会残留，若后续 JS 读取 getBoundingClientRect()，得到的是视觉位置，而非 DOM 布局位置——这时候得靠 transform: none 重置，或用 transform-box: fill-box 配合 SVG 场景校准。
