transform 动画需配合 transition 才有渐变效果，单独使用会立即生效；transition 必须写在初始状态上，推荐明确指定 transform 属性及缓动函数，避免 all；注意 rotate 跨度、scale 与 skew 混用可能导致插值异常，调试可加 outline；优先用 transform 和 opacity 触发硬件加速，移动端慎用自定义 cubic-bezier；transform 不影响文档流，但交互热区不变，需手动处理 pointer-events 和模糊问题。
transform 动画必须搭配 transition 才能有渐变效果
单独写 transform 只会立刻生效，没有过渡——它本身不带时间或缓动逻辑。要让位移、旋转、缩放等变化“动起来”，必须用 transition 声明哪些属性、持续多久、用什么缓动函数。
-
transition要写在**初始状态**的元素上（比如 hover 前的默认样式），不是写在:hover里 - 推荐明确指定属性名：
transition: transform 0.3s ease-in-out;，避免用all引发意外重绘 - 若同时改多个
transform值（如translateX和rotate），仍只需一个transform条目，CSS 会整体插值
transform 的值会被 transition 完整插值，但某些组合会出视觉异常
浏览器对 transform 的插值是基于矩阵运算的，多数情况可靠；但遇到 rotate 跨 180°、或混用 scale 与 skew 时，可能走“最短路径”导致反转或抖动。
- 例如从
rotate(0deg)到rotate(720deg)，浏览器可能只转一圈而非两圈——改用rotate(360deg)+rotate(360deg)分步更可控 - 避免在单条
transform中混用scale(0)和rotate：缩放为 0 时旋转轴失效，恢复时可能跳变 - 调试时可临时加
outline: 1px solid red;观察元素实际变换路径
button {
transform: translateX(0) rotate(0);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
button:hover {
transform: translateX(20px) rotate(5deg);
}
transition-duration 太小或 transform 变化太剧烈会导致卡顿
动画是否流畅，取决于每秒能否稳定输出 60 帧。如果 transition-duration 小于 100ms，或 transform 涉及大量元素、复杂嵌套，GPU 加速可能跟不上。
- 优先用
transform和opacity触发硬件加速，避开left/top或width/height - 对频繁触发的动画（如滚动中），加
will-change: transform;提前提示浏览器，但别滥用——它会常驻占用 GPU 内存 - 移动端要注意：iOS Safari 对
cubic-bezier()的高阶参数支持不稳定，ease-in-out比自定义贝塞尔更稳妥
transform 与 transition 在 flex/grid 容器内行为一致，但布局影响需手动处理
transform 不影响文档流，这点在 flex 或 grid 里依然成立——它不会触发父容器重排，也不会挤压兄弟元素。但视觉错位后，交互热区仍按原始位置计算。
立即学习“前端免费学习笔记（深入）”；
- 点击区域偏移？补上
pointer-events: none;到被变换元素，再用伪元素或 wrapper 拦截事件 - flex 子项做
transform: scale(0.9)后，文字模糊？加backface-visibility: hidden;强制开启子像素渲染 - grid 中用
transform: translateY(-50%)垂直居中时，注意它和align-self: center效果不同：前者脱离布局，后者响应网格线变化
cubic-bezier）对 transform 插值的影响，远比看起来更底层——它调整的是中间矩阵的合成节奏，不是简单地“快慢变化”。调参时最好在真机上反复点按验证。 
